21 June 2021

How to create floating animation in HTML/CSS?

 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

How to add re-captcha v3 on all Elementor forms using coding?

 Add re-captcha v3 on all Elementor forms using coding add_action('wp_footer',function(){     ?> <script src="https://www...