导航：首页 > 开发技术 >

分析CSS动画Transition与Animation

发表于：2025-01-17 作者：千家信息网编辑

千家信息网最后更新 2025年01月17日，本篇内容主要讲解"分析CSS动画Transition与Animation"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"分析CSS动画Transition与

千家信息网最后更新 2025年01月17日分析CSS动画Transition与Animation

本篇内容主要讲解"分析CSS动画Transition与Animation"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"分析CSS动画Transition与Animation"吧!

差异比较

CSS3	差异
`transition`	在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。
	常用语鼠标事件（`:hover`、`active`、`:focus`、`:click`）或键盘输入时触发
	需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。
	只能定义开始状态和结束状态，不能定义中间状态。
`animation`	可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（`@keyframe`）的参数。
	网页加载时会直接执行，可以自行控制各阶段动画的变化

animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。

CSS3	简写顺序
`transition`	`property`名称`timing-function`特效
`animation`	`name`名称`timing-function`特效
	`iteration-count`次数`fill-mode`填充模式

浏览器支持

`transition`写法

.box {  width: 100px;  height: 100px;  background-color: purple;  transition: width 2s ease-in 2s;}.box:hover {  width: 200px;  height: 200px;  background-color: red;}

`animation`写法

.box {  width: 100px;  height: 100px;  border: 1px solid #ccc;  animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change {  from {    background-color: #4BC0C8;  }  to {    background-color: #C779D0;  }}

.box {  width: 100px;  height: 100px;  border: 1px solid #ccc;  animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change {  0% {    background-color: #4BC0C8;  }  20% {    background-color: #C779D0;  }  60% {    background-color: #FEAC5E;  }  80% {    background-color: #185a9d;  }  100% {    background-color: #4BC0C8;  }}

属性	值
`animation-name`	`@keyframes`后的名称
`animation-duration`时间	`time`以秒计算，如`3s initial`预设值`inherit`继承父层
`animation-timing-function`特效	`linear`等速、`ease`、`ease-in`、`ease-out`、`ease-in-out`、`step-start`、`step-end`、`steps(int,start/end)`、`cubic-bezier(n,n,n,n)`可上官网取值使用
`animation-delay`	以秒计算，如`2s`
`animation-iteration-count`次数	`number`预设值为`1`，因此填`2`时，动画跑的次数为`1+2=3`次`infinite`无限循环
`animation-direction`方向	`normal`、`reverse`反向、`alternate`先反后正
`animation-fill-mode`	`forwards`使用关键帧最后的值`backwards`使用最开始的值`both`
`animation-play-state`播放状态	`pause`暂停`running`为预设值`initial`预设值、`inherit`继承父层