1:属性选择器
2:结构伪类选择器
3:伪元素选择器
4:2d转换
5:动画
6:3d转换
7:浏览器私有前缀
css3动画:animation;
1:相对于过渡,动画可以实现更多的控制,连续自动播放等效果;动画更强大;
2:需求:页面一打开,盒子就从左边走到右边;
3:使用:
1:定义动画;
用keyframes定义动画;(类似于定义类选择器)
@keyframes 动画名称{
0%{//动画序列
transform: translateX(0px);
}
100%{//动画序列
transform: translateX(1000px);
}
}
2:调用动画;
animation-name:动画名称;
animation-duration:持续时间;(0.3/1/2)
4:注意:
1:可以改变任意多的次数;
1:定义每次的位置状态关系;
2:里面的百分比就是总时间的划分;
3:里面的百分比得是整数;
2:可以使用百分比规定变化的时间;或者from-->to或者0%-->100%
5:动画属性:
@keyframes
animation:所有动画的简写
animation-name:动画名称
animation-duration:动画持续时间
animation-timing-function:速度曲线,默认ease ,linear step(n)
animation-delay:何时开始,默认0s
animation-iteration-count:播放次数infinite:无限
animatoon-direction:是否反方向,默认是normal,alternate逆播放;
animation-fill-mode:动画结束后的状态,保持:forwards;回到起始:backwards(默认)
animation-play-state:是否正在运行或者暂停,默认是running,还有paused
6:综合使用:
animation:名称 持续时间 速度曲线(ease) 延迟时间(0s) 播放次数(infinite) 是否反向(alternate) 结束后的状态(forwards) ;
7:热点图实现:
opacity:透明度
8:animation-timing-function:属性详解;
1:linear:动画从头到尾速度相同,匀速;
2:ease:默认;动画先低速开始,然后变快;
3:ease-in:低速开始
4:ease-out:低速结束
5:ease-in-out:低速开始和结束
6:steps();指定时间函数中间隔数量(步长):意思是分几步来完成所需要的动画;
可以做打字机效果:
9:添加多种动画:两种动画用逗号个隔开
animation: bear .8s steps(8) infinite,move 5s linear forwards;