CSS3 动画

1、transform属性

a. 2D变换

  rotate() : 定义旋转，接收一个参数，参数为角度（<angle>），用来指定旋转的角度。

//注意浏览器的私有前缀
.css3:hover{
　　transfrom : rotate( 30deg )
}

 

  scale() : 定义缩放，接收一个必选参数、一个可选参数，参数为数值（<number>），用来定义宽高的缩放比例。

　　<number>可以是正数、负数和小数。

　　　　正数---放大元素

　　　　负数---先翻转元素再放大元素

　　　　小数---缩小元素

　　　　注：若省略第二参数，则第二参数值等于第一参数值。

//注意浏览器的私有前缀
.css3:hover{
　　transform : scale( 1.5 );
}

  translate() : 定义移动，接收一个必选参数、一个可选参数，参数为像素（<translateValue>），用来定义 x 轴和 y 轴偏移距离。

　　<translateValue>第一个参数表示相对于原位置的 x 轴偏移距离

 

　　<translateValue>第二个参数表示相对于原位置的 y 轴偏移距离

　　注：若省略第二参数，则第二参数值等于 0 。其中 translateX() 表示 x 轴偏移， translateY() 表示 y 轴偏移

//注意浏览器的私有前缀
.css3:hover{
　　transform : translate(4px,4px);
}

  skew() : 定义倾斜，接收一个必选参数、一个可选参数，参数为角度（<angle>），用来定义x 轴和 y 轴坐标倾斜角度。

　　<angle>第一个参数表示相对于 x 轴倾斜角度

　　<angle>第二个参数表示相对于 y 轴倾斜角度

　　注：若省略第二参数，则第二参数值等于 0 。skew() 会改变元素的形状。

//注意浏览器的私有前缀
.css3:hover{
　　transform : skew( 30deg,-10deg );
}

  transform属性是复合属性：

//注意浏览器的私有前缀
.css3:hover{
　　transform ： translate( 80px,80px ) rotate( 45deg ) scale( 2,2 ) skew( 60deg,60deg )
}

2、transition属性

transition是过渡动画。

a. transition-property 过渡属性

　　值：none --- 没有元素过渡

　　       all --- 所有元素都过渡

　　       <select> --- 指定css属性，可以指定多个。

b. transition-duration 过渡时间

　　值：<time> (时间值，默认为0)

c. transition-delay 过渡延迟时间

　　值：<time> (时间值，默认为0)

d. transition-timeing-function 过渡动画类型

　　值：ease --- 平滑过渡

　　　　linear --- 线性过渡

　　　　ease-in --- 加速

　　　　ease-out --- 减速

　　　　ease-in-out --- 先加速后减速

 

.css3{
　　transition : width 1s 2s linear;
}

　　设置触发方式：

css3动画可以通过css伪类或者JavaScript事件触发

//当鼠标 hover 时，.css3的宽度将延迟2s后经过1s以线性过渡方式变为200px。
.css3：hover{
　　width : 200px;
}

3、animation（帧动画）

Animation功能是通过改变元素的属性值来实现动画效果。

Animation和Transition的区别：
Animation：通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
Transition：通过指定属性的开始值和结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，不能实现更为复杂的动画效果。

animation-attribute（动画属性）:
将动画属性与CSS选择器绑定，注意浏览器的前缀。
（.css3{ animation : css3 1s ease backwards; }）

animation-name : 定义动画名称

animation-duration ：定义动画持续时间

animation-delay ：定义动画延迟时间

animation-timing-function ：定义动画类型
ease（平滑过渡）、linear（线性过渡）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）

animation-iteration-count : 定义播放次数
infinite（无限次）

animation-fill-mode ：播放外状态
forwards --- 动画结束时状态
backwards --- 动画开始时状态

关键帧（@keyframes）
设计关键帧时必须定义from-to或者0%-100%位置帧，并且为每帧定义样式。注意浏览器的前缀。

@keyframes animation-name {

　　from{ property：startValue }

　　to{ property：endValue }

}

或者

@keyframes animation-name {

　　0%{ property：startValue }

　　//可以添加更多的百分数，从而控制中间过程

　　100%{ property：endValue }

}

　　以下是一个完整的animation的例子：

.css3{
　　-webkit-animation:css3 10s 2s infinite;//Safari chrome
　　-moz-animation:css3 10s 2s infinite;//firefox
　　-o-animation:css3 10s 2s infinite;//opera
　　animation:css3 10s 2s infinite;
}
@-webkit-keyframes css3{
　　0%{ -webkit-transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:red; }
　　25%{ -webkit-transform:translate(0,0) rotate(30deg) skew(0) scale(1,1); }
　　50%{ -webkit-transform:translate(500px,0) rotate(0) skew(60deg) scale(1,1);background:green； }
　　75%{ -webkit-transform:translate(250px,0) rotate(-180deg) skew(0) scale(2,4); }
　　100%{ -webkit-transform:translate(0,0) rotate(-360deg) skew(0) scale(1,1);background:blue; }
}
@-moz-keyframes css3{
　　0%{ -moz-transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:red; }
　　25%{ -moz-transform:translate(0,0) rotate(30deg) skew(0) scale(1,1); }
　　50%{ -moz-transform:translate(500px,0) rotate(0) skew(60deg) scale(1,1);background:green; }
　　75%{ -moz-transform:translate(250px,0) rotate(-180deg) skew(0) scale(2,4); }
　　100%{ -moz-transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:blue; }
}
@-o-keyframes css3{
　　0%{ -o-transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:red; }
　　25%{ -o-transform:translate(0,0) rotate(30deg) skew(0) scale(1,1); }
　　50%{ -o-transform:translate(500px,0) rotate(0) skew(60deg) scale(1,1);background:green; }
　　75%{ -o-transform:translate(250px,0) rotate(-180deg) skew(0) scale(2,4); }
　　100%{ -o-transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:blue; }
}
@keyframes css3{
　　0%{ transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:red; }
　　25%{ transform:translate(0,0) rotate(30deg) skew(0) scale(1,1); }
　　50%{ transform:translate(500px,0) rotate(0) skew(60deg) scale(1,1);background:green; }
　　75%{ transform:translate(250px,0) rotate(-180) skew(0) scale(2,4); }
　　100%{ transform:translate(0,0) rotate(0) skew(0) scale(1,1);background:blue; }
}

　　

 

转载于:https://www.cnblogs.com/bowen-wu/p/8068503.html