css3的过渡和动画的属性介绍
一、过渡
什么是过渡?
过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果。
设置能够过渡的属性:
支持过渡的样式属性,颜色的属性,取值为数值,transform,渐变,visibility, 阴影
指定本次过渡生效的属性:
transition-poperty:上面的css属性/all
指定过渡的时长
transition-duration:过渡时长/s/ms
指定过渡时间曲线函数
transition-timing-function:
1.ease 默认值,慢-->快-->慢 慢速开始,快速变快,慢速结束
2.linear 匀速
3.ease-in 慢--->快 慢速开始,快速结束
4.ease-out 快速开始,慢速结束
5.ease-in-out 慢速开始,先加速再减速,慢速结束
指定延迟执行过渡的时间
transition-delay: s/ms
过渡属性的编写位置
1.将过渡放在元素声明的样式中(元素自己的样式里)过渡效果有去有回。
2.将过渡放在元素的触发操作中(hover),过渡效果有去无回。
过渡的简写:
transition:property duration timing-function delay;
最少的方式:transition:duration;
二、动画
什么是动画?
使元素从一种样式,改变到另外一种,再改变到其他样式......
相当于将很多个过渡效果放到一起使用。
关键帧:
1.动画的执行时间点
2.该时间点上的样式
动画的实现步骤:
1.声明动画及动画关键帧
@keyframes 动画名称{
//定义关键帧
0%{ 动画开始的样式 }
........
100%{动画结束时的样式}
}
2.调用动画
animation-name:动画名称;
animation-duration:动画播放一个周期的时间;
3.动画的其他属性
animation-delay
4.动画的速度时间曲线函数
animation-timing-function
ease/linear/ease-in/ease-out/ease-in-out
5.animation-iteration-count
指定动画的播放次数
取值,具体的数字/infinite无限次
6.animation-direction:
动画的播放方向
取值 normal 正常 0%-100%
reverse 逆向播放 100%-0%
alternate 轮流播放
奇数次正向播放
偶数次逆向播放
7.简写方式:
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
指定动画播放前后的显示状态
1.none 默认值
2.forwards 动画完成后,保持在最后一个关键帧上
3.backwards(需要有delay)动画开始之前,保持在第一个关键帧上
4.both,同时设置forwards和backwards
动画的兼容性:
如果要兼容低版本的浏览器,需要在声明动画的时候加前缀
@keyframes 动画名称{}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
三.CSS优化
目的:减少服务器压力,提升用户体验。
1.优化原则
尽量减少HTTP请求的个数。
页面顶部引入css样式
将css和js放到外部独立的文件夹中
2.CSS代码优化
缩小样式文件
减少样式的重写
避免出现空的src和href
选择更优的样式属性值(能使用复合,简写的写法,就不要单独定义)
代码压缩