【简介】
动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数
一般使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器
【兼容】
IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-
优点：关于动画是CSS3引入的，可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
【主要内容】
1. CSS3的@keyframes 规则；
2. animation 属性及它所配置的6个动画属性
①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；
④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向
【详解】
一 . CSS3的@keyframes 规则
如需在 CSS3 中创建动画，需用到@keyframes 规则。@keyframes 规则用于创建动画，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
兼容：
目前浏览器都不支持 @keyframes 规则
Firefox 支持替代的 @-moz-keyframes 规则；Opera 支持替代的 @-o-keyframes 规则；Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则
动画绑定选择器：
当在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
①规定动画的名称；②规定动画的时长
注意：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0
语法：
@keyframes animationname动画名称 {keyframes-selector时长 {css-styles;样式}}
二 . animation 属性
它所有动画属性的简写属性，除了 animation-play-state 属性
作用：将动画与文档元素（div等dom）绑定
animation 属性是一个简写属性，用于设置六个动画属性：
①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；
④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向
【兼容】IE10、Firefox 以及 Opera 支持6个动画属性，Safari 和 Chrome 支持替代的 -webkit+...属性
下面依次介绍6个动画属性：
①animation-name动画名-----规定需要绑定到选择器的 keyframe 名称；
②animation-duration动画持续时间------规定完成动画所花费的时间，以秒或毫秒计（默认值是 0，意味着没有动画效果）；
③animation-timing-function动画定时功能------规定动画的速度曲线，速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。能够在该函数中使用自己的值，也可以预定义的值：
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
④animation-delay动画延迟------ 定义动画何时开始，属性值以秒或毫秒计
提示：允许负值，例-2s 使动画马上开始，但会从开始跳过 2 秒直接进入动画周期。默认值是 0
⑤animation-iteration-count动画迭代计数------规定动画应该播放的次数
属性值：n------定义动画播放次数的数值；infinite------规定动画应该无限次播放
⑥animation-direction动画方向------规定是否应该轮流反向播放动画
属性值：normal------默认值，动画正常播放；alternate------动画轮流反向播放（在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放），例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持
animation-direction 属性。</p>
<div></div>
</body>
</html>
三 . 其他动画属性
①animation-play-state动画播放状态------规定动画是否正在运行或暂停，默认是 "running"
属性值：paused------规定动画已暂停；running------规定动画正在播放
②animation-fill-mode动画填充模式------规定对象动画时间之外的状态，指的是动画在播放之前或之后，其动画效果是否可见
通俗的讲就是动画结束之后保持什么状态
（1）none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样；
（2）forwards 表示将动画元素设置为整个动画结束时的状态。；
（3）backwards 明确设置动画结束之后回到初始状态；
（4）both 表示设置为结束或者开始时候的状态。一般都是回到默认状态
相关推荐
2. **继承动画**：创建一个新的类，继承现有的 animate.css 动画，并添加或调整属性。 3. **使用 CSS 动画关键帧**：结合使用 `@keyframes` 规则创建完全自定义的动画。 ### 结合 JavaScript 为了更精确地控制动画...
本篇将详细阐述CSS3中的关键知识点，包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧，定义了从一种样式到另一种样式的...
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性...
在本主题中，我们将深入探讨“纯CSS3 Animation动画属性点击loading加载动画”。这个主题涉及到CSS3的两个核心特性：animation（动画）和loading（加载）效果，它们都是现代网页设计不可或缺的部分。 首先，我们要...
在深入探讨CSS动画之前，我们先来了解一下这个领域的一些基础知识。CSS动画，或者称为CSS Animation 101，是前端开发中的一个重要概念，它允许开发者为网页元素添加动态效果，从而提升用户体验，使网站更加生动有趣...
CSS动画是由CSS关键帧（@keyframes）规则定义的一系列样式变化，通过animation属性应用到元素上。关键帧定义了动画从开始到结束的不同阶段的样式，浏览器会自动平滑地在这两个状态之间过渡。例如，一个简单的旋转...
在Elements面板中，选中正在执行动画的元素，然后转到Computed或Styles面板，可以查看当前应用的CSS动画属性，如`animation-name`、`animation-duration`、`animation-timing-function`等。同时，Timeline面板（在旧...
4. CSS动画属性：`animation`用于应用动画。 5. CSS伪类：`:hover`, `:active`, `:focus`等，控制不同状态下的样式。 6. 动画效果设计：如脉冲、旋转、滑动等。 通过这些技巧，我们可以创建出丰富多样的CSS动画按钮...
在实际应用中，CSS动画可以与其他CSS特性结合使用，如`transition`属性，它能实现属性值的平滑过渡。此外，还可以利用`transform`属性进行旋转、缩放、位移等变换，配合动画效果，实现更多元的动态表现。 学习纯CSS...
css用对少的代码，来给用户最佳的体验感，下面我总结了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，希望大佬直接拍砖评论。 1 transition(过渡) 使用语法: transition: property duration ...
随着技术的发展，CSS3引入了许多新的特性和功能，其中就包括丰富的动画效果。本篇将详细探讨CSS3动画切换效果及其在实际应用中的实现。 一、CSS3动画基础 1. `@keyframes` 规则：CSS3动画的核心是`@keyframes`，它...
通过利用CSS3的:hover伪类和各种动画属性，我们可以创建出丰富多彩的交互效果，使得用户在鼠标悬停在元素上时能够看到动态的视觉反馈。 一、`:hover` 伪类 `:hover` 是CSS中的一个选择器，用于定义当鼠标指针浮动在...
这个创意CSS3属性鼠标悬停动画菜单的实现，能够大大提升网站的用户体验，使得用户在浏览时更加愉悦且易于导航。下面我们将深入探讨如何利用CSS3来构建这样的功能。 首先，我们要了解CSS3中的关键帧动画（@keyframes...
在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中，我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色，...
3. **导出设置**：使用插件或脚本，选择要导出的层和动画属性。这可能包括位置、缩放、旋转、透明度等。确保选择的属性在CSS中是支持动画的。 4. **生成CSS代码**：运行插件或脚本，它会解析AE中的关键帧并生成相应...
2. **动画属性**：CSS3提供了几个属性来控制动画的行为，包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`...
modernizr框架制作html5 CSS3动画属性8种瀑布流
本文将深入探讨如何利用CSS动画技术，将各种动态效果嵌入到浏览器中，提升用户体验。我们将围绕七个不同的主题进行讨论： 一、齿轮Loading 齿轮加载动画是一种常见的网页加载指示器，它通过旋转的齿轮形象地展示...
主要的动画属性包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`和`animation-direction`等。 例如，为`<nav>`元素应用上述动画，可以...
3. **动画属性**：在元素样式中设置动画属性，如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`和`animation-iteration-count`等。这些属性控制了动画的类型、持续时间、...