I have been messing about with some css animations and somehow managed to get things to work as required on :hover
My question is how to get them to return to state smoothly after the :hover ends.
I've tried variations of animation-fill-mode but nothing seems to work.
.move img {
width: 50px;
}
.move {
font-size: 55px;
top: 45px;
position: relative;
display: inline-block;
}
.move span {
position: relative;
display: inline-block;
}
@keyframes move {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(0%, 0) skew(0deg) rotate(90deg);
}
}
@keyframes rotate {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
.parent:hover .move {
animation-name: move;
animation-duration: 1.2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.parent:hover .move span {
animation-name: rotate;
animation-duration: 1.2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
JS Fiddle Here to see it in context.
Use transitions
instead.
.move img {
width: 50px;
}
.move {
font-size: 55px;
top: 45px;
position: relative;
display: inline-block;
transform: rotate(0deg);
transition: transform 1.2s ease-out;
}
.move span {
position: relative;
display: inline-block;
transform: rotate(0deg);
transition: transform 1.2s ease-out;
}
.parent:hover .move {
transform: rotate(90deg);
transition: transform 1.2s ease-out;
}
.parent:hover .move span {
transform: rotate(-90deg);
transition: transform 1.2s ease-out;
}