CSS过渡和动画

2023-05-29,,

.过渡

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表示慢速开始快速变化 慢速结束(2linear匀速(3ease-in 慢速开始 匀速结束(4ease-out 快速开始慢速结束(速率与1不同)(5ease-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: 动画播放

《CSS过渡和动画.doc》

下载本文的Word格式文档,以方便收藏与打印。