<div id="ex-anime">
<div class="anime-cont">
<p>touch me!</p>
</div>
</div>
#ex-anime {
padding: 10px;
.anime-cont {
width: 100px;
height: 100px;
background-color: #ff6347;
p {
padding: 40px 10px;
color: #fff;
}
&:hover {
animation-name: anime-in;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
}
}
@keyframes anime-in {
0% {
width: 100px;
background-color: #ff6347;
}
50% {
width: 350px;
}
58% {
width: 230px;
}
70% {
width: 330px;
}
85% {
width: 280px;
}
100% {
width: 350px;
background-color: #4169e1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.