Create floating animation in HTML/CSS.
.floating_x {
animation-name: floating_x;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating_x {
from {
transform: translate(0px, 0px)
}
65% {
transform: translate(15px, 0px)
}
to {
transform: translate(0px, 0px)
}
}
.floating_y {
animation-name: floating_y;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating_y {
from {
transform: translate(0px, 0px)
}
65% {
transform: translate(0px, -20px)
}
to {
transform: translate(0px, 0px)
}
}
.floating_y2 {
animation-name: floating_y2;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 1s
}
@keyframes floating_y2 {
from {
transform: translate(0px, 0px)
}
50% {
transform: translate(0px, -20px)
}
to {
transform: translate(0px, 0px)
}
}
.floating_y3 {
animation-name: floating_y3;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out
}
@keyframes floating_y3 {
from {
transform: translate(0px, 0px)
}
65% {
transform: translate(0px, -20px)
}
to {
transform: translate(0px, 0px)
}
}
No comments:
Post a Comment