分析CSS动画Transition与Animation

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

创新互联从2013年创立，先为瓜州等服务建站，瓜州等地企业，进行企业商务咨询服务。为瓜州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

差异比较

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继承父层

到此，相信大家对“分析CSS动画Transition与Animation”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享文章：分析CSS动画Transition与Animation
分享路径：http://bzwzjz.com/article/jjohio.html