CSS 的关键帧和动画

CSS 的关键帧和动画是如何工作

如果要给元素添加动画，你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。总共有 8 个 animation 属性。

animation-name
用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。
animation-duration
设置动画所花费的时间。

@keyframes 可以通过设置特定时间点的行为来创建动画。为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。下面举例说明 @keyframes 和动画属性的用法：

#anim {animation-name: colorful;animation-duration: 3s;
}@keyframes colorful {0% {background-color: blue;}100% {background-color: yellow;}
}

id 为 anim 的元素，我们在代码中将它的 animation-name 设置为 colorful，同时设置 animation-duration 为 3 秒。然后我们把 @keyframes 规则添加到名为 colorful 的动画属性上。在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

@keyframes 规则的用法。
还有一个常用的动画属性是 animation-iteration-count，这个属性允许你控制动画循环的次数。下面是一个例子：

animation-iteration-count: 3;

在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。

<style>#ball {width: 100px;height: 100px;margin: 50px auto;position: relative;border-radius: 50%;background: linear-gradient(35deg,#ccffff,#ffcccc);animation-name: bounce;animation-duration: 1s;animation-iteration-count: infinite;}@keyframes bounce{0% {top: 0px;}50% {top: 249px;width: 130px;height: 70px;}100% {top: 0px;}}
</style>
<div id="ball"></div>

注释：把 animation-iteration-count 属性改成 infinite，使右边的球一直跳跃。
同样的，我们可以利用无限动画计数制作心跳：
心跳动画的每一秒包含两个部分。 heart 元素（包括 :before 和 :after）使用 transform 属性改变其大小，背景 div 使用 background 属性改变其颜色。

<style>.back {position: fixed;padding: 0;margin: 0;top: 0;left: 0;width: 100%;height: 100%;background: white;animation-name: backdiv;animation-duration: 1s; animation-iteration-count:infinite;}.heart {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: pink;height: 50px;width: 50px;transform: rotate(-45deg);animation-name: beat;animation-duration: 1s; animation-iteration-count:infinite;}.heart:after {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;}.heart:before {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;}@keyframes backdiv {50% {background: #ffe6f2;}}@keyframes beat {0% {transform: scale(1) rotate(-45deg);}50% {transform: scale(0.6) rotate(-45deg);}}</style>
<div class="back"></div>
<div class="heart"></div>

注释：给 back class 和 the heart class 添加 animation-iteration-count 属性，将属性值设置为 infinite，使心保持跳动。 heart:before 和 heart:after 所选择的元素则不需要添加动画属性。

CSS 的关键帧和动画相关推荐

如何使用CSS创建巧妙的动画提示框
原文:https://webdesign.tutsplus.co... 原作:Jase Smith 翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后 ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
css光盘转动,CSS 实现加载动画之五-光盘旋转
CSS 实现加载动画之五-光盘旋转今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分 ...
深挖基于 CSS 的变换与动画技术
深挖基于 CSS 的变换与动画技术李俊才的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm= ...
如何使用 CSS 为 SVG 制作动画：示例教程
8 分钟阅读编者注:本文最后更新于 2022 年 7 月 12 日,以包含更多示例. Web 动画是一种乐趣,它通过提供视觉反馈.引导用户完成任务以及使网站整体变得活跃来改善用户体验.有几种方法可以 ...
css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示 ...
CSS进阶-盒子与动画
CSS进阶-盒子与动画文章目录 CSS进阶-盒子与动画前言 Chapter04 CSS3动画 1. Animation动画 1.1 关键帧 1.2 定义关键帧 1.2.1 定义示例 1.2.2 效 ...
CSS和HTML帧动画
1.定义关键帧 @keyframes 动画名称(英文) { 0% { /* 动画的开始 */ } 25% { ...
CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...

CSS 的关键帧和动画

CSS 的关键帧和动画是如何工作

CSS 的关键帧和动画相关推荐

最新文章

热门文章