CSS3——动画

介绍

　　CSS3动画分为三种：过渡、变换、动画

 

分类

　　transition

　　　　　作用：伪类被触发时，属性变换有过渡的时间

　　　　　值：

　　　　　　属性 过渡时间 速度曲线 过渡延迟

　　　　　　　　属性：如width 、height、color、background-color（必选）

　　　　　　　　过渡时间：以秒为单位 （必选）

　　　　　　　　速度曲线：（非必选）

　　　　　　　　　　　　linear：规定以相同速度开始至结束的过渡效果，匀速

　　　　　　　　　　　　ease：慢速开始，然后变快，然后变慢结束

　　　　　　　　过渡延迟：以秒为单位

　　　　　　使用：

<div class="mydiv"></div>


.mydiv {
　　margin: 0px auto;
　　width: 200px;
   height: 200px;
   background-color: red;
   transition: width 2s ease, height 2s ease, background-color 2s ease;
}

.mydiv:hover {
   width: 400px;
   height: 400px;
   background-color: #ADD8E6;
}

 

 

　　transform

　　　　作用：以元素中心为原点，进行如平移、旋转、缩放、倾斜等2D及3D变换

　　　　值：

　　　　　　translate(xxpx，xxpx)：水平平移xxpx，垂直平移xxpx

　　　　使用：

<div class="mydiv"></div>


.mydiv {
    width: 200px;
    height: 200px;
    background-color: #00BFFF;
}

.mydiv:hover {
    transform: translate(100px,100px);
}