Home > Developer > Web Develop
Today is free to send a few days ago to learn things, are some simple things, but a single step forward, although I walked slowly, but did not stop the pace of progress ~~~~~~~
Let's look at the final dynamic effect of the "fade in text" I've made:
The process of making this animation effect is:
(1) First customize an animation with a transparency change from 0 to 1, and then call this animation effect in animation
(2) Note the time of the non-peer text appears, this through the animation delay attribute can be achieved
(3) Specify the final dynamic of the text for the final display state of the animation, otherwise the text will automatically disappear after display, this can be achieved by Animation-fill-mode
First, take a look at the HTML program:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Fade in text</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/animate.css" /> </Head> <Body> <Divclass= "Fade-in-words"> <Divclass= "First-words">A trip to the mountains, a journey of water,</Div> <Divclass= "Second-words">Yu Guan to the bank,</Div> <Divclass= "Third-words">Late at night, Thousand books lamp.</Div> <Divclass= "Four-words">Wind a more, snow a more,</Div> <Divclass= "Five-words">Grumbles Broken township heart Dream not,</Div> <Divclass= "Six-words">Hometown no such sound.</Div> </Div> </Body></HTML>
The above procedure is mainly the first text presented, I casually find a poem ~~~~~ Everyone do not guess what it means qaq
Second, look at the CSS style (mainly CSS3)
. fade-in-words{width:200px; margin:0 Auto; Text-align:center;} /* Customize an animation with a transparency from 0 to 1, whose name is fade-in*/@keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-ms-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-o-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}. first-words{opacity:0; /* First specify that the state of the text is not displayed */animation:fade-in 4s ease 0s 1; /* Call name fade-in animation, full animation display time 4S, enter the way for ease, delay 0S Enter, play 1 times */-webkit-animation:fade-in 4s ease 0s 1; -moz-animation:fade-in 4s ease 0s 1; -o-animation:fade-in 4s ease 0s 1; -ms-animation:fade-in 4s ease 0s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }.second-words{opacity:0; animation:fade-in 4s ease 2s 1; -webkit-animation:fade-in 4s ease 2s 1; -moz-animation:fade-in 4s ease 2s 1; -o-animation:fade-in 4s ease 2s 1; -ms-animation:fade-in 4s ease 2s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }.third-words{opacity:0; animation:fade-in 4s ease 4s 1; -webkit-animation:fade-in 4s ease 4s 1; -moz-animation:fade-in 4s ease 4s 1; -o-animation:fade-in 4s ease 4s 1; -ms-animation:fade-in 4s ease 4s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }.four-words{opacity:0; animation:fade-in 4s ease 6s 1; -webkit-animation:fade-in 4s ease 6s 1; -moz-animation:fade-in 4s ease 6s 1; -o-animation:fade-in 4s ease 6s 1; -ms-animation:fade-in 4s ease 6s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }.five-words{opacity:0; animation:fade-in 4s ease 8s 1; -webkit-animation:fade-in 4s ease 8s 1; -moz-animation:fade-in 4s ease 8s 1; -o-animation:fade-in 4s ease 8s 1; -ms-animation:fade-in 4s ease 8s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }.six-words{opacity:0; animation:fade-in 4s ease 10s 1; -webkit-animation:fade-in 4s ease 10s 1; -moz-animation:fade-in 4s ease 10s 1; -o-animation:fade-in 4sEase 10s 1; -ms-animation:fade-in 4s ease 10s 1; /* Specifies that the last state of the animation is the end state */animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; }
The above program I wrote in the comments are very clear, interested can read my comments, I think it is relatively simple, no difficulty, but need to pay attention to the addition of browser prefixes, or you know ~ ~ ~
CSS3 Study Notes (1)-Fade in text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
