13518219792
本篇内容主要讲解“css3怎么设置动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3怎么设置动画”吧!
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、成都网站制作、郁南网络推广、成都小程序开发、郁南网络营销、郁南企业策划、郁南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供郁南建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
首先我们来了解一下css3实现简单动画需要用到的属性：animation属性，@keyframes“规则”。
animation属性和@keyframes“规则”是css3新增的属性，animation属性可用来给动画设置许多的CSS样式，例如color，background-color，height，或width。
我们先通过@keyframes“规则”定义，再在animation属性里调用，就可以实现一个简单的动画效果了。
如下所示：实现背景颜色的不断切换
.element{
animation:pulse5sinfinite;
}
@keyframespulse{
0%{
background-color:#001F3F;
}
100%{
background-color:#FF4136;
}
}
运行后，背景颜色会不断的进行变化，在#001F3F颜色值到#FF4136颜色值过渡变化，之间也会显示一些过渡的背景色。大家可以自己动手试试效果。
每个@keyframes规则定义了在动画期间中的特定时刻应该发生的事情。例如，0％是动画的开头，100％是结束。然后可以通过速记animation属性或其八个子属性来控制这些关键帧，以更好地控制应如何操纵这些关键帧。
下面我们来看看animation属性的子属性有哪些？有什么作用？
1、animation-name：声明@keyframes要操作的at-rule的名称。
2、animation-duration：动画完成一个循环所需的时间长度。
3、animation-timing-function：建立预设的加速度曲线，如ease或linear。
4、animation-delay：正在加载的元素和动画序列的开始之间的时间。
5、animation-direction：设置循环后动画的方向。它的默认值在每个周期重置。
6、animation-iteration-count：动画应执行的次数。
7、animation-fill-mode：设置在动画之前/之后应用的值。
例如，我们可以将动画的最后状态设置为保留在屏幕上，也可以将其设置为在动画开始之前切换回。
8、animation-play-state：暂停/播放动画。
然后可以像这样使用这些子属性：
@keyframesstretch{
/*在这里声明动画的动作*/
}
.element{
animation-name:stretch;
animation-duration:1.5s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-fill-mode:none;
animation-play-state:running;
}
/*
相同：
*/
.element{
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
到此，相信大家对“css3怎么设置动画”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
