发布日期：2017-09-18 10:34:42
这是学习css3动画效果的示例，动态不停旋转文字。
可以参考网址：https://tympanus.net/Tutorials/CSS3RotatingWords/index4.html
这是简单效果图截屏。
首先HTML代码如下：
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>We design & develop</span>
<div class="rw-words rw-words-1">
<span>beautiful websites</span>
<span>interesting apps</span>
<span>impactful identities</span>
<span>working strategies</span>
<span>incredible gadgets</span>
<span>intelligent systems</span>
</div>
<div class="rw-words rw-words-2">
<span>that captivate your users</span>
<span>that create huge revenue</span>
<span>that make you stand out</span>
<span>that will push you forward</span>
<span>that make your life easy</span>
<span>that automatize processes</span>
</div>
</h2>
</section>
Span中的文字会自动一个接一个展示，之间有切换效果。
CSS代码:
<style>
@media screen and (max-width: 1060px){
.rw-words{ height: 55px; }
.rw-words-1 span{ font-size: 280%; text-indent: 5px;}
.rw-words-2 span { font-size: 160%; }
}
@media screen and (max-width: 560px){
.rw-words{ height: 40px; }
.rw-words-1 span{ font-size: 180%; text-indent: 5px;}
.rw-words-2 span { font-size: 90%; }
.rw-sentence > span:first-child{ font-size: 80%;}
}
@media screen and (max-width: 400px){
.rw-words{ height: 30px; }
.rw-words-1 span{ font-size: 140%; text-indent: 5px;}
.rw-words-2 span { font-size: 70%; }
.rw-sentence > span:first-child{ font-size: 60%;}
}
body{
font-family: 'Open Sans Condensed','Arial Narrow', serif;
font-weight: 400;
font-size: 15px;
}
.rw-sentence{
text-transform:uppercase;
font-weight:300;
text-shadow:0 0 0 rgba(0,0,0,0.0001);
}
.rw-words{
position: relative;
height:100px;
-webkit-perspective: 800px;
perspective: 800px;
}
.rw-words-1 span,.rw-words-2 span{
position:absolute;
left:0;
}
.rw-words-1 span{
font-size:500%;
line-height: 82%;
animation: rotate1 18s linear infinite 0s;
-webkit-animation: rotate1 18s linear infinite 0s;;
}
.rw-words-2 span{
font-size:300%;
font-style: italic;
text-indent: 5px;
line-height: 90%;
color:#FF0000;
animation: rotate2 18s ease-in infinite 0s;
-webkit-animation: rotate2 18s ease-in infinite 0s;;
}
.rw-words span{
position: absolute;
opacity:0;
white-space: nowrap;
overflow: hidden;
width:100%;
}
.rw-words span:nth-child(2){
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
}
.rw-words span:nth-child(3){
animation-delay: 6s;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
}
.rw-words span:nth-child(4){
animation-delay: 9s;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
}
.rw-words span:nth-child(5){
animation-delay: 12s;
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
}
.rw-words span:nth-child(6){
animation-delay: 15s;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
}
@keyframes rotate1 {
0% {opacity: 0; transition-timing-function: ease-in; width:0%;}
5% {opacity:1; transition-timing-function: ease-out; width:100%;}
17% {opacity: 1;}
20% {opacity: 0;}
100% {opacity:0;}
}
@-webkit-keyframes rotate1 {
0% {opacity: 0; transform:translateZ(600px) translateX(200px);width:0%;}
5% {opacity:1; transform: translateZ(0) translateX(0);width:100%;}
17% {opacity: 1;}
20% {opacity: 0;}
100% {opacity:0;}
}
@keyframes rotate2 {
0% {opacity: 0; transform:translateZ(600px) translateX(200px);}
8% {opacity:1; transform: translateZ(0) translateX(0);}
17% {opacity: 1;}
25% {opacity: 0;}
100% {opacity:0;}
}
@-webkit-keyframes rotate2 {
0% {opacity: 0; -webkit-transform:translateZ(600px) translateX(200px);transform:translateZ(600px) translateX(200px);}
8% {opacity:1; -webkit-transform: translateZ(0) translateX(0);transform: translateZ(0) translateX(0);}
17% {opacity: 1;}
25% {opacity: 0;}
100% {opacity:0;}
}
</style>
该CSS中的几个要点列出如下：
1. 英文大小写转化，不用担心文字输入源，都可以统一转化为大写或小写。
text-transform: uppercase;
2. 先定义动画。这里比例的选择将会影响整体动画效果。动画时长在使用动画的地方定义时间，所以这个百分比为动画总时长的百分比时间帧。
@keyframes rotate2 {
0% {opacity: 0; transform:translateZ(600px) translateX(200px);}
8% {opacity:1; transform: translateZ(0) translateX(0);}
17% {opacity: 1;}
25% {opacity: 0;}
100% {opacity:0;}
}
3. 在span元素上使用动画，定义使用的动画名称（animation-name），定义该动画的时长（animation-duration），动画的速度曲线(animation-timing-function)，动画应该轮流反向播放(animation-direction), 以及是否循环次数(animation-iteration-count)。
animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function: ease(default) / linear / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n) animation-delay animation-iteration-count: infinite / n; animation-direction : alternate / normal;
animation: rotate2 18s ease-in infinite 0s; -webkit-animation: rotate2 18s ease-in infinite 0s;;
4. 给每个span定义动画的延时(animation-delay)，从而一个接一个开始展示。默认每个span为透明的。
.rw-words span:nth-child(2){
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
}
参考资料：
- http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
- https://tympanus.net/Tutorials/CSS3RotatingWords/index4.html