大家好，欢迎来到雄雄的小课堂，前面，我们将CSS的变形和过渡都整理了，有需要的可以移步这里看：

CSS3中的动画示例

CSS3的几个变形案例……

今天，我们来看看CSS3的动画。

CSS3使用动画分为两个步骤：

1.通过类似flash动画的关键帧来声明一个动画。

2.在animation属性中调用关键帧声明的动画，实现一个更为复杂的动画效果。

接下来我们具体来看看CSS3是如何实现动画的？

01

设置关键帧

在CSS3中，把@keyfreams成为关键帧，这个关键帧可以设置多段属性，其语法为：

@keyfreams name{from{//CSS代码}percentage{//CSS 代码}to{//CSS 代码}}

也可以将from、percentage和to换成百分比，如下：

@keyfreams name{0%{//CSS代码}50%{//CSS 代码}100%{//CSS 代码}
}

语法解析：

name:动画的名称，通过该名称来调用该动画

percentage（50%）：是一个百分比，主要用来定义某个时段的动画效果。

下面我们来看一段代码：

Html代码：

<div style="background: darkgoldenrod;" id="div7">

CSS样式代码：

/*声明一个动画*/@keyframes name{0%{width: 200px;height: 200px;background: yellow;}50%{width: 400px;height: 400px;background: green;}75%{width: 500px;background: black;}100%{width:600px ;height: 600px;background: cornflowerblue;}}

02

调用动画

@keyfreams只是用来声明动画效果的，但是如果不调用它的话，它就不会起什么效果，下面我们来看看怎么通过animation来调用动画。

语法：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

语法好长，下面来解释一下吧。

animation-name：调用的动画名称

animation-duration animation-timing-function animation-delay：分别是过渡时间，过渡方式，延迟时间。

animation-iteration-count：动画的播放次数，可以是整数，如果是infine的话，则是无限循环。

animation-direction：动画播放的方向，normal表示向前播放，alternate表示一前一后（播放次数偶数向前播放，奇数则反方向播放）。

animation-play-state：动画的播放状态，running和paused.

下面我们来看看调用动画的代码：

#div7:hover{animation:name 1s infinite alternate ease-in-out;}

效果如图所示：

往期精彩

CSS3中的动画示例

2020-11-19

CSS3的几个变形案例……

2020-11-18

jsp中使用cookie时报错……

2020-11-17

Java中的TreeSet集合会自动将元素升序排序

2020-11-16

“老师，请您多关注一下我吧！！！”

2020-11-15

晨读，难道只是为了完成任务而读的吗？

2020-11-14

点分享

点点赞

点在看