1、transform 改变 ,html中线性动画的数据。
具体的值:
(1)translate 转化变化,线性变化效果。
例如: 同时设置x 轴,和y 轴的偏移效果
transform: translate(10px,20px);
分别设置,x轴和y轴的偏移效果。
transform: translateX(4px);
transform: translateY(20px);
(2) scale 比例变化,缩放效果
scale 的值表示,相对原来大小倍数。
例如:
transform: scale(1.5);
将原来的元素大小,设置为原来1.5倍
* 注意:如果要设置多条动画效果,需要写在同一个 transform里面。
例如:
transform: scale(1.1) translateX(30px);
同时设置,缩放效果,和x轴平移效果。
(3)skew 动画倾斜效果。
例如:
transform:skew(30deg,30deg) ;
解析:
向x轴偏移30度角,向y轴偏移30度角。
(4) rotate 旋转动画效果。
例如:
transform: rotate(45deg);
/*顺时针方向,旋转45度*/
如果给的旋转角度,是负值,就逆时针旋转。
2、transition 动画属性的设置。
(1)设置什么样的动画效果,写动画效果的属性。
可以具体设置一个属性,比如宽高,背景颜色,动画效果。
也可以设置关键字: all 代表,
触发动画之后,所有的属性,都可以变化。
(2)设置过度需要的时间。动画执行过程需要几 秒 (以秒为单位)
(3)设置动画的效果
由快到慢: ease
渐显渐隐 效果: ease-in 渐显
ease-out 渐隐
ease-in-out
匀速 linear
(4)设置动画延迟时间,也就是几秒之后,才执行动画。
例如:
transition:all 2s ease-in-out 2s ;
设置动画效果属性
所有属性发生变化
2s执行完
渐显渐隐效果
延迟2s后开始 执行 注意:transition 是动画属性的设置
在动画的原始状态下,即标签常规状态下设置。
而动画效果的触发,可以设置在特定情况下,比如鼠标悬停。
3、animation 关键帧动画效果
(1)动画的声明:
@keyfrafme 动画名字{
开始状态设置
过度状态设置
结束状态设置
}
例如:
/*创建动画关键帧*/
@keyframes spread {
0%{
width: 0;
transform: translate(100px,0);
}
25%{
width: 20px;
transform: translate(200px,0);
}
50%{
width: 50px;
transform:translate(300px,0);
}
75%{
width: 20px;
transform:translate(200px,0);
}
100%{
width: 0px;
transform:translate(100px,0);
}
}
(2)动画的使用:
animation: 动画名字
动画时间 以秒为单位设置具体的值
播放方式
延迟时间 以秒为单位设置具体的值
动画播放次数 可以具体设置数字限定执行次数。
也可以设置 infinite ,表示无限次!
动画播放方向
动画播放状态
动画开始之前和结束之后的操作
例如:
/*调用动画*/
animation: spread 2s linear infinite;