22.7K
ANIf you are finding CSS animations hard, I’m going to show you how to master them in 30 seconds.
All you need to know, is that to create a basic animation, you have to fill in the following things. The name of your animation, you can call this whatever you want. The duration of your animation, so let’s say I want it to last 3 seconds. And the animation iteration count, I’m going to say infinite. Now, you are going to grab the animation name, so in this case it is “grow”, and define it using keyframes. In our basic example, I’m going to day that at 0 percent of my 3 second animation, the width of my div is 0 percent and at 100% of my 3 second animation, so when the time is up, the width of my div is 100%. This can be substituted by from and to, if you wish.
Simple!
Now, the duration can change to any amount of time like so, and the animation iteration count can be any number if not infinite. You can even add an animation direction, so I’m going to choose to add alternate, so that the animation alternates.
Cool right? There are other sub-properties you can put which I listed below, and you can even do it in a shorthand, like so. So that these 4 lines, go to one.
Once you Get the hand of this, you can get creative with your keyframes, so that different things happen at different percentages.
Don’t forget to check out my free 12 hour video course on my YouTube channel for more html tips.
Animation properties:
animation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timeline
animation-timing-function
—HTML—
<div></div>
—CSS—
div {
animation: grow 3s infinite alternate;
height: 40px;
background-color: green;
}
@keyframes grow {
0% {
width: 0%;
}
100% {
width: 100%
}
}
@aniakubow
