@keyframes关键帧animation：

首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：

然后，在需要设置动画的相应的标签里，调用动画就可以了

比如需要给div添加动画效果：

div{

animation：1s 2s 动画名称运动方式动画执行的次数

}

解释：

第一个值：运动的总时间

第二个值：延迟的动画时间，单位是秒或者毫秒

第三个值：动画名称

第四个值：运动方式

第五个值：动画执行的次数

animation是所有动画属性的简写，除了animation-play-state属性

注意：为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀

最后，依次解释一下动画的各个属性

/*动画名称*/

-webkit-animation-name: run;

/*动画时长*/

默认：0；

animation-duration: 1s;

/*动画速度曲线*/

animation-timing-function: linear;

linear 匀速

ease 先慢后快，默认

ease-in 慢速开始

ease-out 慢速结束

ease-in-out 开始和结束都慢

cubic-bezier 贝塞尔曲线推荐工具：

/*动画延迟几秒之后执行,可以为负数*/

animation-delay: 0s;

/*动画的次数*/

可以具体的数值，也可以说是无限次 infinite

infinite无限执行

animation-iteration-count: infinite;

/*动画是否在下一周期逆向的播放*/

nomal正常的，默认

reverse反向的、

alternate单数正向，偶数反向、

alternate-reverse单数反向，偶数正向

animation-direction: alternate;

/*动画开始之前或者结束之后所在的位置*/

forwards动画在结束之后停留在to的位置（最后一帧）

backwards动画在延迟期间会停留在from的位置（第一帧）

both以上两种情况都有

nomal默认没有

animation-fill-mode: forwards;

/*动画的播放状态*/（写在hover里面是为了不让其影响平时的状态）

paused暂停

running运行，默认

animation-play-state:paused;

@keyframes关键帧动画（animation）相关推荐

CSS3中的关键帧@keyframes 和动画animation
animation的复合属性 animation-name 定义的@keyframes的名称 animation-duration 动画持续的时间 animation-timing-function ...
css3关键帧动画以及兼容性策略
一.关键帧动画 animation 属性两个关键词 :调用动画 animation.定义关键帧(动画) @keyframes 1.定义关键帧兼容性前缀 @-webkit-keyframes,谷歌 ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
CSS3，旋转rotate，动画animation
1.旋转rotate -- 可以让元素在2维平面顺时针或者逆时针旋转 1.语法:transform:rotate(度数) 2.重点:- 度数的单位是deg 举个例子:rotate(45deg)- 角度 ...
CSS3 animation 关键帧动画 keyframes
animation 基本用法语法格式: animation: name duration timing-function delay iteration-count direction; 第一个参数 ...
html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
css3动画与@keyframes关键帧
Css3动画与@keyframes关键帧开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月21日在一个"@keyframes"中的样式规则可以 ...
css 实现动画的三种方式: transition 过渡、 transform 变形、 animation 关键帧动画
1.transition 过渡动画: 1. 语法:1. transition: 属性是个复合属性 .2. transition: property duration timing-function d ...
core Animation之CAKeyframeAnimation(关键帧动画)
CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSA ...

@keyframes关键帧动画（animation）

@keyframes关键帧animation：

@keyframes关键帧动画（animation）相关推荐

最新文章

热门文章