9.1、@keyframes关键帧

@keyframes定了一个动画，可以由多个帧组成。例如

@keyframes my_name{0%{transform: translateY(-100px);}50%{transform: translateY(-50px);}100%{transform: translateY(100px);}
}

可知my_name动画由两帧组成，第一帧从0%到50%，第二帧从50%到100%，0%、50%、100%指的是animation-duration的时间比例。比如animation-duration：2s，则前1s内，从transform: translateY(-100px)运动到transform: translateY(-50px);处；在后1s内，从transform: translateY(-50px)运动到transform: translateY(100px)。

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style type="text/css">#wrap{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 300px;height: 300px;border: 1px solid;}#wrap > .box{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 100px;height: 100px;border: 1px solid;background: pink;border-radius: 50%;/*动画*/animation-name: my_name;animation-duration: 3s;animation-iteration-count: 2;animation-direction: alternate;animation-fill-mode: both;}@keyframes my_name{0%{transform: translateY(-100px);}50%{transform: translateY(-50px);}100%{transform: translateY(100px);}}</style></head><body><div id="wrap"><div class="box"></div></div></body>
</html>

当动画开始时，小球在第1s内由-100px运动到-50px，在第2s内由-50px运动到100px处。由于animation-iteration-count：2，表示帧要重复两次，是对my_name中的所有帧都重复两次，所以，在第3s内再由100px处运动到-50px处，最后，由-50px处运动到-100px处，结束动画。

9.1、@keyframes关键帧相关推荐

html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
@keyframes关键帧动画（animation）
@keyframes关键帧animation: 首先需要定义一套关键帧,关键帧的定义方式比较特殊,它使用了关键字@keyframes来定义动画.这里可以用from{}to{}或者用百分比充当时间点.具 ...
css3动画与@keyframes关键帧
Css3动画与@keyframes关键帧开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月21日在一个"@keyframes"中的样式规则可以 ...
在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
Keyframes介绍使用
Animation动画 css3为Animation动画提供的几个属性如下: animation-name:指定动画名称,该属性指定一个已有的关键帧定义. animation-duration:指定动 ...
动画—Keyframes介绍
动画-Keyframes介绍 Animation动画 css3为Animation动画提供的几个属性如下: animation-name:指定动画名称,该属性指定一个已有的关键帧定义. animati ...
css3（keyframes）的无限旋转
css3(keyframes)的无限旋转初学css3动画旋转,是不是很想自己能实现无限旋转就好了那么现在我就用@keyframes(关键帧)来教你实现无限旋转, 先在body里面写一个div标签, ...
3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{animation-play-state:paused;-webkit- ...

9.1、@keyframes关键帧

9.1、@keyframes关键帧相关推荐

最新文章

热门文章