CSS Animations permite que varios elementos de una página web cambien gradualmente de un estilo a otro. Estos hacen que el sitio web se vea más atractivo e interesante . Invertir una animación significa reproducirla hacia atrás.
Enfoque 1: este ejemplo ilustra la inversión de una animación utilizando @keyframes from a @keyframes to y viceversa para la animación inversa.
- Sintaxis:
-
elementSelector { animation-name: myanimation; } @keyframes myanimation { from { //code } to { //code } }
-
element.classList.add("myclassname");
-
- Programa:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>animation</
title
>
<
style
>
h1 {
color: green;
}
.mystyle:hover {
background-color: aqua;
animation-name: myanimation;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.mystyle {
animation-name: reverse;
animation-duration: 1s;
}
@keyframes myanimation {
from {
transform: rotate(0deg) scale(1);
border-radius: 0px;
}
to {
border-radius: 100px;
transform: rotate(360deg) scale(0.7);
}
}
@keyframes reverse {
from {
border-radius: 100px;
transform: rotate(360deg) scale(0.7);
}
to {
border-radius: 0px;
transform: rotate(0deg) scale(1);
}
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>GeeksforGeeks</
h1
>
<
p
>Animation and reverse animation</
p
>
<
img
id
=
"image"
src
=
alt
=
"image"
width
=
"260"
height
=
"260"
class
=
"alignnone size-full wp-image-1477785"
onmouseover
=
"myFunction()"
/>
</
center
>
</
body
>
</
html
>
- Producción:
Enfoque 2: este ejemplo ilustra el uso de la propiedad de transición para crear un efecto de animación al pasar el mouse por encima y una animación inversa al pasar el mouse por fuera.
- Programa:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>animation</
title
>
<
style
>
h1 {
color: green;
}
.div1 {
padding: 20px;
background: green;
border-radius: 0px;
cursor: pointer;
color: white;
text-align: center;
transition-duration: 5s;
height: 100px;
width: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.div1:hover {
background: #ff7b29;
border-radius: 30px;
transform: scale(1.5);
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>GeeksforGeeks</
h1
>
<
p
>Animation and reverse animation</
p
>
<
div
class
=
"div1"
>
<
h3
>A Computer Science Portal for Geeks</
h3
>
</
div
>
</
center
>
</
body
>
</
html
>
- Producción :