Because we’re considering only text animation in this example, the HTML section will only contain text elements inside respective tags, while the animation itself will be triggered in CSS where we’ll be working with To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the The sub-properties of the animation property are:<\/p>\n Defining the animation sequence using keyframes<\/strong><\/p>\n Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.<\/p>\n Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a percentage to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from\/0% or to\/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.<\/p>\n Let’s now show a basic text animation using the knowledge above. Firstly, add a line of code containing text in HTML.<\/p>\n In CSS, as you can see below, I’ve added a simple color change animation from green to red:<\/p>\n Well, you can see the real animation in an image, but the transition looks like this: Text position animation can be a useful one on pages. Let’s see how we can implement it in CSS.<\/p>\n Alternatively to the You can see a live preview here<\/a> of how this looks like (the live view contains a rectangular, but it is basically the same animation on text), as you might imagine images cannot illustrate animations).<\/p>\n Not only can you have various text animations one by one, but also a group of them in one single run of the animation. Here we’re considering an animation of two positions and color at the same time. Set up a new example on your html with the class of animation<\/code> and keyframes<\/code> properties.<\/p>\n1.2 Understanding CSS Animations<\/h3>\n
@keyframes<\/code> at-rule as described in Defining the animation sequence using keyframes below.<\/p>\nanimation-delay<\/code>
\nConfigures the delay between the time the element is loaded and the beginning of the animation sequence.
\nanimation-direction<\/code>
\nConfigures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
\nanimation-duration<\/code>
\nConfigures the length of time that an animation should take to complete one cycle.
\nanimation-iteration-count<\/code>
\nConfigures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
\nanimation-name<\/code>
\nSpecifies the name of the @keyframes at-rule describing the animation’s keyframes.
\nanimation-play-state<\/code>
\nLets you pause and resume the animation sequence.
\nanimation-timing-function<\/code>
\nConfigures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
\nanimation-fill-mode<\/code>
\nConfigures what values are applied by the animation before and after it is executing.<\/p>\n1.3 A Basic Application<\/h3>\n
\r\n<!-- HTML SECTION -->\r\n<div>This is just modified text.<\/div>\r\n<\/pre>\n
\r\n<!-- STYLE SECTION -->\r\n<style type=\"text\/css\">\r\nbody {\r\n font-family: \"BarnaulGrotesk\";\r\n}\r\ndiv {\r\n font-size: 2em; \/*increased font size*\/\r\n color: green; \/*set a font color to green*\/\r\n -webkit-animation-name: basic; \/* Chrome, Safari, Opera *\/\r\n -webkit-animation-duration: 4s; \/* Chrome, Safari, Opera *\/\r\n animation-duration: 4s; \/*set how long will the animation run*\/\r\n animation-name: basic; \/*give the animation a name to refer later in keyframes*\/\r\n}\r\n@keyframes basic { \/*refer to our current keyframe: basic*\/\r\n from {color: green;} \/*start animation with this property and value*\/\r\n to {color: red;} \/*end the animation with this property and value*\/\r\n}\r\n<\/style>\r\n<\/pre>\n
\n![\"Basic](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/text-animations1.jpg\")
<\/a>2. Cases and Examples<\/h2>\n
2.1 Changing Text Position<\/h3>\n
\r\n<!-- HTML SECTION -->\r\n<div class=\"ex1\">This is just modified text.<\/div>\r\n<\/pre>\n
\r\n.ex1 {\r\n font-size: 2em;\r\n color: green;\r\n position: relative; \/*changed position to relative*\/\r\n -webkit-animation-name: example-1;\r\n -webkit-animation-duration: 4s;\r\n animation-duration: 4s;\r\n animation-name: example-1;\r\n}\r\n@keyframes example-1 {\r\n from {left: 0px;} \/*defined left value to 0px initially*\/\r\n to {left: 200px;} \/*defined left value to 200px to move the text*\/\r\n}\r\n<\/pre>\n<\/a>2.2 Using Percentage Keyframes<\/h3>\n
from<\/code>–to<\/code> keywords used inside keyframes, you could also use percentages to define the different states. Look at the example below, where we use 0%, 25%, 75%, and 100% to define different behaviour to the color of the text:<\/p>\n \r\n@keyframes example-2 {\r\n 0% {color: red;}\r\n 25% {color: yellow;}\r\n 50% {color: blue;}\r\n 100% {color: green;}\r\n}\r\n<\/pre>\n2.3 Multiple Animations at Once<\/h3>\n
ex3<\/code> and give it the following CSS properties:<\/p>\n\r\n .ex3 {\r\n font-size: 2em;\r\n color: green;\r\n position: relative;\r\n -webkit-animation-name: example-3;\r\n -webkit-animation-duration: 4s;\r\n animation-duration: 3s; \/*changed duration to 3s*\/\r\n animation-name: example-3;\r\n}\r\n\r\n@keyframes example-3 { \/*applying multiple animations*\/\r\n 0% {color: indianred; left: 0px; top: 0px;}\r\n 25% {color: magenta; left: 50px; top: 10px;}\r\n 50% {color: peru; left: 100px; top: 15px;}\r\n 100% {color: forestgreen; left: 150px; top: 20px;}\r\n}\r\n<\/pre>\n