Someone explain me @keyframe of css simply?

Question

I can't understand keyframe topic

Answer 1

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

To learn more, have a look at: https://www.sololearn.com/learn/CSS/2253/

Answer 2

@keyframes declare a custom animation in pure CSS.
you can specify any transform and styling change in it, binding them to certain positions in % of animation time, and then apply it to some objects on a page.

You can check these examples:
https://code.sololearn.com/WuLii208ax6C/?ref=app
https://code.sololearn.com/WrH74vuisntz/?ref=app
https://code.sololearn.com/Wdi0n05bSx0L/?ref=app
https://code.sololearn.com/Wrknu9P531Q0/?ref=app
https://code.sololearn.com/W0mEzFOI27w9/?ref=app
https://code.sololearn.com/WY93kEz2Gn7b/?ref=app
https://code.sololearn.com/W0KTMpG9s9r7/?ref=app
https://code.sololearn.com/WHT9bornSBLU/?ref=app
https://code.sololearn.com/W4Nwj3LAUkvS/?ref=app
https://code.sololearn.com/W4l2HyQ385m5/?ref=app

Answer 3

Thanks bibek.But if there's written 0%, 50%, 100%.Then how can I write this by just 'from' and 'to'??

Answer 4

/* This is for CSS attchment */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400i');

/* First Define Class */
.x {
font-family: Ariel;
text-align: center;
width: 250px;
height: 100px;
color: #517034;
background-color: #bbf783;
animation: x 1s linear alternate;
animation-iteration-count: infinite;
}

/* Then give it movement */
@keyframes x {
0% {transform: none;}
100% {transform: rotateY(180deg);}
}

/* HTML Code is below to see the effect

<div class="x">Some Text</div> */

The same is mentioned in Jesus examples.

Answer 5

You can use both percentages or from-to in your animation.
In using % you define every steps for your animation.
By using from-to, you define starting and end point.Than the animation will run in that range till specified time.
Have a look at examples of both at:
https://code.sololearn.com/Wv1ox6JlRnFY/?ref=app

Answer 6

Thanks everyone

Answer 7

Ok I understand a bit