css3中的 @Keyframes

一、介绍

keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面跟着是动画名称加上一对花括号“{…}”，括号中是一些不同时间段样式规则。

语法：@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到

一种在不断变化的效果。

举个栗子：

@keyframes changecolor{0%{background: red;}20%{background:blue;}40%{background:orange;}60%{background:green;}80%{background:yellow;}100%{background: red;}
}
div {width: 150px;height: 100px;background: red;color:#fff;margin: 20px auto;
}
div:hover {animation: changecolor 5s ease-out .2s;
}

二调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大

小写），如果不一致将不具有任何动画效果。

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。　

/*
注意translate变化的坐标位置
四个角顺时针的坐标(0,0) (100,0) (100,100) (0,100)
因为圆半径为10
所以圆运动的坐标点得在角原来的坐标上-10pxanimation-delay设置0s,这样动画就不会有延迟
*/
@keyframes around{0% {transform: translate(-10px,-10px);}25%{transform: translate(90px,-10px);}50%{transform: translate(90px, 90px); }75%{transform:translate(-10px,90px);}100%{transform: translate(-10px,-10px);}
}
div {width: 100px;height: 100px;border: 1px solid #000;margin: 20px auto;
}
div span {display: inline-block;width: 20px;height: 20px;background: orange;border-radius: 100%;/*调用动画名*/animation-name:around;animation-duration: 10s;animation-timing-function: ease;animation-delay: 0s;/*动画无限循环*/animation-iteration-count:infinite;
}

三、设置动画的播放次数

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

语法：animation-iteration-count: infinite | <number>

默认值为1，取值为infinite时，动画将无限次播放

@keyframes move {0%{transform: translate(0);}15%{transform: translate(50px,80px);}30%{transform: translate(100px,0);}45%{transform: translate(150px,80px);}60%{transform:translate(200px,0);}75%{transform: translate(250px,80px);}100%{transform: translate(300px,0);}
}div {width:320px;height: 100px;border: 1px solid #000;margin: 20px auto;
}
div span {display: inline-block;width: 20px;height: 20px;background: green;border-radius: 100%;animation-name:move;animation-duration: 10s;animation-timing-function:ease;animation-delay:.1s;animation-iteration-count:infinite;
}

四、设置动画播放方向

animation-direction属性主要用来设置动画播放反向

语法：animation-direction:normal | alternate

normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

在上面栗子的 div span{…}加上animation-direction:alterate, 如图

五、设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态

有两个参数：running， paused

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定

是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

@keyframes move {0%{transform: translateY(40px);}15%{transform: translate(40px,40px);}30%{transform: translate(40px,80px);}45%{transform: translate(40px,40px);}60%{transform: translate(40px,0);}75%{transform: translate(40px,40px);}90%{transform: translate(80px,40px);}100%{transform: translateY(40px);}
}div {width: 100px;height: 100px;border: 1px solid red;margin: 20px auto;
}
span {display: inline-block;width: 20px;height: 20px;background: orange;transform: translateY(90px);animation-name: move;animation-duration: 10s;animation-timing-function: ease-in;animation-delay: 0s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused;
}
div:hover span {animation-play-state:running;
}

六、设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。有四个属性值：none | forwards | backwords |both

比如，如果想让动画停在最后一幀处:animation-fill-mode:forward;

转载于:https://www.cnblogs.com/afighter/p/5732710.html

css3中的 @Keyframes相关推荐

html keyframes无效,CSS3 中的@keyframes介绍
语法 @keyframes animationname {keyframes-selector {css-styles;}} animationname 必需.定义动画的名称. keyframes-s ...
css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
CSS3中的2D和3D转换知识介绍
一 2D转换转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
CSS3 动画关键帧 @keyframes
在CSS3中,通过 animation 属性来定义动画.虽然 transition 也可以实现从一种状态到另一种状态的动画效果,但它只能控制开始和结束的两个点,功能非常有限.而 animation 除 ...

css3中的 @Keyframes

css3中的 @Keyframes相关推荐

最新文章

热门文章