189 8069 5689
一.过渡
创新互联专业为企业提供阳春网站建设、阳春做网站、阳春网站设计、阳春网站制作等企业网站建设、网页设计与制作、阳春企业网站模板建站服务，十载阳春做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1.定义：将CSS的属性值在一段时间内平缓变化的过程给体现出来；
2.指定过渡属性
2.1作用：指定哪个或者哪几个属性值，在变化时需要使用过渡效果来体现；
2.2属性：transition-property取值：属性名 例子：transition-property:background;
2.3注意：允许设置过渡效果的属性如下
颜色属性，取值为数字的属性，转换属性（transform），渐变属性，阴影属性，visibility属性
3.指定过渡时长
3.1作用：指定在多长时间内完成过渡操作
3.2 属性：transition-duration 取值：s/ms
4.指定过渡速度时间函数
4.1属性 transition-timing-function
4.2取值：（1）默认值，ease表示慢速开始快速变化 慢速结束（2）linear匀速（3）ease-in 慢速开始 匀速结束（4）ease-out 快速开始慢速结束（速率与1不同）（5）ease-in-out 慢速开始和结束
5.指定过渡延迟时间 transition-delay:时间
6.过渡的编写位置
6.1允许将过渡属性编写在元素声明的样式中;
6.2 触发过渡效果样式中（hover）
二．动画
1.定义：使元素从一种样式逐渐变化为另一种样式，动画是复杂的过渡效果。动画是通过关键帧来控制动画的每一步。
关键帧：在某个时间点上，元素的状态和样式是怎样的。
2.动画的使用步骤：
2.1声明动画：
@keyframes 动画名称{
/* 定义该动画中所有的关键桢*/
0%{动画开始时的样式}
100{动画结束时的样式}
}
3.动画属性
3.1 animation-name 指定动画的名称
3.2 animation-duration 指定动画执行的一个周期的时长
3.3animation-timing-function
3.4 animation-delay
3.5animation-iteration-count 作用：指定动画的播放次数；取值：1.具体数值；2.infinite 无限次
3.6.animation-direction 指定动画的播放方向；normal 正常播放 alternate轮流播放，偶数次时正向播放，奇数次时逆袭播放
动画的简洁写法：animation: name duration timing-function delay iteration-countdirection
3.7 animation-fill-mode
定义：规定动画在播放前和播放后的状态；
取值：3.7.1 none：默认行为 不改变；3.7.2 forwards当动画完成后，保持在最后一个帧的状态上；3.7.3 backwards 在动画播放前的延迟时间内，动画将保持在第一帧的状态；3.7.4 both: forwards+backwards
3.8 animation-play-state:指定动画的播放状态
取值：pasuse 动画暂停；running: 动画播放