Animations
Какво е анимация
CSS анимациите ви позволяват да анимирате прехода между един CSS стил и друг.
#animation1{
width: 200px;
height: 200px;
background-color: green;
border-radius: 15px;
animation-name: color-change;
animation-duration: 6s;
}
@keyframes color-change{
form {background-color: green;}
to {background-color: cyan}
}
animation-name - задава имато на анимацията
animation-duration - задава трайността на анимацията
@keyframes - в скобите определяме как изглежда анимацията
to/from - как започва и как свършва (от 0% до 100%)
Animation property change and percents%
#animation2{
width: 200px;
height: 200px;
background-color: #0094AA;
border-radius: 15px;
animation-name: opacity-change;
animation-duration: 6s;
}
@keyframes opacity-change{
25%{
opacity: 0.75; width: 200px;
margin-right: 50px;
}
50%{
opacity: 0.5; width: 150px;
margin-right: 100px;
}
75%{
opacity: 0.25; width: 100px;
margin-right: 150px;
}
100%{
opacity: 0; width: 50px;
margin-right: 200px;
}
}
More properties
animation-delay - След колко време да започне анимацията
animation-iteration-count - колко пъти да се повтори анимацията
animation-direction - reversed - наобратно, alternate - стига до края и се връща
Крива на скоростта
animation-timing-function - променя кривата на скоростта на анимацията. Ползвайки cubic-bezier(n,n,n,n) може да зададем собствена крива, останалите стойности са показани долу:
ease-in-out
ease-out
ease-in
ease
linear
Напреднал пример
CSS
.system {
background-color: #251C2D;
position: relative;
width: 100%;
max-width: 700px;
padding-top: 100%;
}
@media (min-width: 700px) {
.system {
padding-top: 700px;
}
}
.system__sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.system__orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 100%;
transform: translate(-50%, -50%);
animation: spin infinite linear both;
}
.system__orbit:nth-child(1) {
width: calc(10%);
height: calc(10%);
}
.system__orbit:nth-child(2) {
width: calc(20%);
height: calc(20%);
}
.system__orbit:nth-child(3) {
width: calc(30%);
height: calc(30%);
}
.system__orbit:nth-child(4) {
width: calc(40%);
height: calc(40%);
}
.system__orbit:nth-child(5) {
width: calc(50%);
height: calc(50%);
}
.system__orbit:nth-child(6) {
width: calc(60%);
height: calc(60%);
}
.system__orbit:nth-child(7) {
width: calc(70%);
height: calc(70%);
}
.system__orbit:nth-child(8) {
width: calc(80%);
height: calc(80%);
}
.system__orbit:nth-child(9) {
width: calc(90%);
height: calc(90%);
}
.system__orbit:nth-child(10) {
width: calc(100%);
height: calc(100%);
}
.system__orbit--sun {
border: none;
}
.system__orbit--(planet name) {
animation-duration: 1s;
}
.system__orbit--venus {
animation-duration: 2.6s;
}
.system__orbit--earth {
animation-duration: 4.1s;
}
.system__orbit--mars {
animation-duration: 7.8s;
}
.system__orbit--jupiter {
animation-duration: 49.8s;
}
.system__orbit--saturn {
animation-duration: 120.3s;
}
.system__orbit--uranus {
animation-duration: 348.4s;
}
.system__orbit--neptune {
animation-duration: 684.4s;
}
.system__orbit--pluto {
animation-duration: 1028.6s;
}
.system__planet {
position: absolute;
top: 50%;
left: -12px;
width: 25px;
height: 25px;
border-radius: 100%;
transform: translateY(-50%);
}
.system__icon {
width: 100%;
height: 100%;
}
@keyframes spin {
from {
transform: translate(-50%, -50%);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}