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

选择更优的样式属性值(能使用复合，简写的写法,就不要单独定义)

代码压缩