[amp_mcq option1=”animation-delay” option2=”animation-iteration-count” option3=”animation-duration” option4=”animation-name” correct=”option4″]<\/p>\n
The correct answer is: D. animation-name<\/strong><\/p>\n The The The The Here is an example of how to use the “`css @keyframes my-animation { In this example, the [amp_mcq option1=”animation-delay” option2=”animation-iteration-count” option3=”animation-duration” option4=”animation-name” correct=”option4″]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[733],"tags":[],"class_list":["post-43012","post","type-post","status-publish","format-standard","hentry","category-css-properties-css-elements-css-functions-and-tables","no-featured-image-padding"],"yoast_head":"\nanimation-name<\/code> property is used to define the animations that should be run. It takes a string value that is the name of an animation defined in the CSS stylesheet.<\/p>\nanimation-delay<\/code> property is used to specify a delay before the animation starts. It takes a time value in seconds.<\/p>\nanimation-iteration-count<\/code> property is used to specify how many times the animation should be repeated. It takes an integer value.<\/p>\nanimation-duration<\/code> property is used to specify the duration of the animation. It takes a time value in seconds.<\/p>\nanimation-name<\/code> property:<\/p>\n
\n.my-element {
\n animation-name: my-animation;
\n}<\/p>\n
\n 0% {
\n transform: translate(0, 0);
\n }
\n 100% {
\n transform: translate(100px, 0);
\n }
\n}
\n“`<\/p>\nanimation-name<\/code> property is used to define an animation named my-animation<\/code>. The @keyframes<\/code> rule defines the animation, which will move the element from its original position to a position 100px to the right.<\/p>\n","protected":false},"excerpt":{"rendered":"