CSS3 高级教程:动画定义和使用

目录

前言

一、keyframes定义动画

二、元素使用动画

1.关键代码

2.使用举例

三、CSS3动画常见属性

 四、速度曲线

总结

前言 

CSS3可以实现HTML元素的动画效果，不使用JavaScript或者是Flash也能实现动画效果，在CSS3中新增了一个transition模块，通过一些简单的CSS 事件来触发元素的外观变化，使得显示的效果更加细腻。

一、keyframes定义动画

        使用@keyframes规则，可以创建动画，指定变化时用0%到100%，或关键词“from”和“to”，0%是动画的开头，100%是动画的结尾。我们把名称定义为move，关键代码如下：

@keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1000px);   //沿着X轴移动1000像素。
            }
        }

二、元素使用动画

1.关键代码

        调用动画：
                        animation-name: move;
        持续时间：
                        animation-duration: 2s;

2.使用举例

我们来看看这个动画是怎么完成的，首先直接建立一个盒子div，然后为其设置样式，其中有些属性什么意思不懂可以看下面第三节：CSS3动画常见属性

1.  
   div {
2.  
   width: 100px;
3.  
   height: 100px;
4.  
   background-color: powderblue;
5.  
   animation-name: move;
6.  
   animation-duration: 2s;
7.  
   animation-timing-function: ease;
8.  
   animation-delay: 2s;
9.  
   animation-iteration-count: infinite;
10.  
    animation-fill-mode: forwards;
11.  
    }

三、CSS3动画常见属性 

        常用的动画属性这么多，单独使用的话非常的麻烦，我们可以使用简写来使用这些属性，

        基本语法如下：

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

animation: name duration timing-function delay iteration-count direction fill-mode;  

值得注意的是，前面两个属性name，duration是必要条件，一定要写

简写注意事项：        

        1.简写属性里面不包含animation-play-state

        2.暂停动画：animation-play-state：paused；经常和鼠标经过等其他配合使用

        3.想要盒子走回来，不是跳回来：animation-direction：alternate

        4.盒子动画结束后，停在结束位置：animation-fill-mode：forwards

 四、速度曲线

                                                            下面使用步长来举一个简单的例子，效果图如下：

        步长可以用于模拟电脑打字的效果，一起来看看如何实现的吧。还是建立一个div盒子，

        把要输出的文字填入：

<div>模拟电脑打字输入</div>

        CSS3代码部分：

                 首先使用overflow：hidden把没显示的部分隐藏，然后使用animation调用动画w，持续4s，forwards动画停留在结束状态，步长为10，简单来说就是在4s内显示10步以完成动画。

1.  
   @keyframes w {
2.  
   0% {
3.  
   width: 0;
4.  
   }
5.  
   100% {
6.  
   width: 200px;
7.  
   }
8.  
   }
9.  
    
10.  
     
11.  
    div {
12.  
    overflow: hidden;
13.  
    font-size: 20px;
14.  
    white-space: nowrap; //不换行
15.  
    width: 0;
16.  
    height: 30px;
17.  
    background-color: pink;
18.  
    animation: w 4s forwards steps(10);
19.  
    }

总结

动画更多的是配个一些2D，3D效果共同使用来达到更好的效果，CSS3的动画相较于JavaScript或者是Flash更加简洁，在编程的过程中，也会少使用软件减轻工作量。

这篇好文章是转载于：学新通技术网