CSS3的动画效果

1.2D变换

Transform(变形)

rotate()旋转函数 取值度数 transform: rotate(30deg);

skew() 倾斜函数 取值度数 transform: skew(30deg);

scale()缩放函数 取值 正数、负数和小数

transform: scaleX(1.2) scaleY(1.2);

translate()位移函数 像素值 transform: translateX(100px);

transform-origin() 改变旋转基点 transform-origin: 100px 100px;

2.3D变换

1.transform-style（preserve-3d） 建立3D空间

2.perspective 景深

3.perspective- origin 景深基点

4.transform 新增函数

rotateX()

rotateY()

rotateZ()

translateZ()

scaleZ()

3.animation

关键帧——keyFrames ,类似于flash

animation:运动名称,运动时间,运动形式,动画延时,播放次数,播放前是否重置

只需指明两个状态，之间的过程由计算机自动计算关键帧的时间单位

数字：0%、25%、100%等

字符：from(0%)、to(100%)

格式

“`
@keyframes 动画名称
{
动画状态
}

:代码展示如下


    div{
        width:200px;
        height:200px;
        background-color: lightblue;
        margin:150px auto;
    }
    @keyframes domove {
        0%{width:200px;}
        33%{width:300px;}
        66%{width:600px;}
        100%{width:1000px;}
    }
    div:hover{    
           animation: domove 3s linear forwards;      
  }

用animate做一个进度条的效果

html部分

    <div id="div1">
        <div></div>
    </div>

css部分


#div1{
width: 1000px;
height:30px;
border: #cccccc solid 1px;
margin: 200px auto;
border-radius: 15px;
}
#div1 div{
width: 0;
height:30px;
background-color: slategray;
border-radius: 15px;
animation: domove 4s linear forwards;
}
#div1:hover div{
animation-play-state:paused;
}
@keyframes domove {
0%{width:0;}
50%{width:800px;}
100%{width: 1000px;}
}