用css3的animatiom完成动画的小效果

来源：互联网发布：水表读卡器软件编辑：程序博客网时间：2024/06/07 02:44

用CSS3的animation实现动画

用到了animation就先说说这个属性吧！

一、animation属性简介

animation是网页上的动画，是通过@keyframe定义一个定义帧动画！完成网页的炫酷的小动画！在CSS3出现之前，网页上的动画大多是用flash实现的，flash动画会产生很大的弊端！操作不便等等

因为暂时是学习回忆阶段，没有考虑兼容性问题，所以在css里没有加上前缀，请见谅！

1. 语法

animation: name duration timing-function delay iteration-count direction;

2. 定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name: --规定需要绑定到选择器的 keyframe 名称。。
animation-duration: --规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: --规定动画的速度曲线。
animation-delay: --规定在动画开始之前的延迟。
animation-iteration-count: --规定动画应该播放的次数。
animation-direction: --规定是否应该轮流反向播放动画。

值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。

1. animation-name

animation-name 属性为 @keyframes 动画规定名称。

animation-name: keyframename|none;

值描述keyframename规定需要绑定到选择器的 keyframe 的名称。none规定无动画效果（可用于覆盖来自级联的动画）。

2. animation-duration

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

animation-duration: time;

值描述time规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

3. animation-timing-function

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值描述linear动画从头到尾的速度是相同的。（等于 cubic-bezier(0,0,1,1)）。ease默认。动画以低速开始，然后加快，在结束前变慢。（cubic-bezier(0.25,0.1,0.25,1)）。ease-in动画以低速开始。（等于 cubic-bezier(0.42,0,1,1)）。ease-out动画以低速结束。（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out动画以低速开始和结束。（等于 cubic-bezier(0.42,0,0.58,1)）cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。推荐个有意思的链接，贝塞尔曲线链接

4. animation-delay

animation-delay 值以秒或毫秒计。

animation-delay 属性定义动画何时开始。

提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-delay: time;

值描述time可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

5. animation-iteration-count

animation-iteration-count 属性定义动画的播放次数。

animation-iteration-count: n|infinite;

值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。

6. animation-direction

animation-direction属性规定动画是否循环播放

animation-direction:normal|alternate;

7. animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

animation-fill-mode 是不能被定义在animation简写属性里面的，只能定义在animation简写属性的外面

animation-fill-mode : none | forwards | backwards | both;

值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both向前和向后填充模式都被应用。

8. animation-play-state

animation-play-state 属性规定动画正在运行还是暂停。

animation-play-state 是不能被定义在animation简写属性里面的，只能定义在animation简写属性的外面

animation-play-state: paused|running;

值描述paused规定动画已暂停。running规定动画正在播放。

二丶介绍下他们的使用情况吧

动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

下面是我们实现动画的过程了

首先，先写个字体出来吧！就一我上一篇介绍的火焰字好了！上篇的代码对这篇的代码不会有干扰的

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小效果</title><style type="text/css">/*通配符重置浏览器默认的两个值，对本文没有太大影响，不知道可以无视*/*{margin: 0;padding: 0;}.div1{width: 300px;height: 100px;padding-top: 20px;line-height: 100px;margin:200px auto 0;text-align: center;font-size: 40px;font-weight: bold;font-family: "华文行楷";background: #000;color:#F60;text-shadow: 0px 0px 2px #fff,0px -3px 3px #1EB,0px -6px 4px #01DEFD,0px -9px 5px #0BF,0px -12px 6px #08F;}</style></head><body><div class="div1">超炫火焰字</div></body></html>

效果如图：

1.animation-name

我们在color后面添加一个animation-name动画名字吧

animation-name:myanim;

然后我们接续创建一个@keyframes{}动画

/*记住这个不用放到div1类名里面的*/@keyframes myanim{0%{text-shadow: 0 0 0 #000;}100%{text-shadow: 0px 0px 2px #fff,0px -3px 3px #1EB,0px -6px 4px #01DEFD,0px -9px 5px #0BF,0px -12px 6px #08F;}}

我们就会发现暂时是没有效果的，因为我们没有添加完成的时间

3.animation-timing-function

我们在animation-duration后面添加一个animation-timing-function动画整个过程的动画的速度曲线

animation-timing-function:linear;

我们就会发现没什么效果，因为这个是速度，速度为匀速嘛！你们也可以将速度改变就可以了

4.animation-delay

我们在animation-timing-function后面添加一个animation-delay动画延迟的时间为2s吧

animation-duration:2s;

我们就会发现出现了一个动画被延迟了2s后才开始完成的一次动画

5.animation-iteration-count

我们在animation-timing-function后面添加一个animation-iteration-count动画的次数吧

animation-iteration-count:2;

我们就会发现动画被播放2次

6.animation-direction

我们在animation-delay后面添加一个animation-direction动画是否循环播放吧

animation-direction:alternate;

我们就会发现出现了一个动画是慢慢出来，然后慢慢缩回去的？

7.animation-fill-mode

我们在animation-direction后面添加一个animation-fill-mode,让动画在动画之外是否保持动画的状态，并且将次数改为3

animation-fill-mode:both;

我们就会发现出现了一个动画先出来，然后回去，再出来，这样就经过3次之后就完全停在了最后的状态是不是并没有像刚才那样闪回去了？还有一个暂时属性的，很少用到就不在这讲解了，你们可以尝试给hover效果时添加这个属性，那么当鼠标移进的时候就会触发动画的暂停效果了

好了这次文章介绍的动画就到此结束了

阅读全文

0 0