小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
路难行，行路难，一身汗水，满心长。脚下百里路，头顶艳阳天。坚定如磐石，信念似火烧。好男儿，人穷志不缺，天道也酬勤。四方走，走四方，一身是胆，豪气壮。前方坎坷途，千难万般阻。心若有明灯，身似般若行。好男儿，大志存高远，四海皆为家。
动画
动画是什么
CSS3新增animation属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括以下个部分:
- 用于定义动画的样式规则。
- 用于设置动画开始、结束以及中间点样式的关键帧。
相对于传统使用。JavaScript实现的动画方式，CSS3新增的animation属性具有以下三个优点:
- 能够非常容易地创建简单动画,甚至不需要掌握. JavaScript。
- 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现的动画效果。
- 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。
animation属性
CSS animation属性是一个简写 属性，用于创建复杂的动画序列，并控制CSS的样式属性实现动画效果。
该属性可以分为以下几个样式属性:
- animation- name:用于设置关键帧动画的名称，该属性值必须与@keyframes规则相对应。
- animation-duration:用于设置动画执行所需的时长。
- animation-timing-function:用于设置动画的执行方式，与transition- timing-fu nction属性类似。
- animation-delay:用于设置开始执行动画之前需要等待的时长。
- animation- iteration- count:用于设置动画执行的循环次数。
- animation-direction:用于设置动画执行的方向。
- animation- play- -state: 用于设置动画执行的状态。
- animatio-fill-mode:用于设置动画的时间外属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的动画效果</title>
<style>
/*
通过css的样式规则定义动画
@keyframes myimate {
执行动画过程的关键帧
}
*/
@keyframes myimate {
from {
width: 200px;
}
to {
width: 500px;
}
}
/*
在对应的样式块中，通过animation属性进行调用
* animation-name - 表示设置当前使用动画名称
* animation-duration - 表示设置当前动画执行的时长
* animation-delay - 开始执行前的等待时间
* animation-iteration-count - 表示设置当前动画执行次数
*/
.container {
width: 200px;
height: 200px;
background-color: aqua;
animation-name: myimate;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
检测CSS动画支持情况
想要通过CSS3新增的animation属性实现动画效果，首先需要确认当前浏览器是否支持该样式属性。
var animation = falpse,
animationstring = 'animation',
keyframeprefix= ",
domPrefixes = 'Webkit Moz 0 ms Khtml'.split(''),
pfx='',
elm = document.createElement('div');
if( elm.style.animationName !== undefined ) {
animation = true;
}
if( animation === false){
for( var j= 0; i< domPrefixes.length;i++ ){
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ){
pfx = domPrefixes[ i];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() +'-';
animation = true;
break;
}
}
}
@keyframes声明动画
通过使用@keyframes建立两个或两个以上关键帧来实现。每一个 关键帧都描述了动画元素在给定的时间点上应该如何渲染。
@keyframes <keyframes-name> {
<keyframe-block-list>
}
- keyframes- name:用于设置当前动画的名称，以便通过animation-name属性调用。
- keyframe- block- list:用于设置动画执行过程中的关键帧。
调用@keyframes动画
通过使用@keyframes建立建立动画序列后，需要通过animation属性或者animation-name属性调用。
@keyframes 'slideteft' {
0% { left: -500px; }
100% { left: 0; }
}
.slideLeft:target {
z-index: 100;
animation-name: slideLeft;
animation-duration: 1s;
animation-iteration-count: 1;
}
通过名称调用动画
animation-name.属性用于应用指定的一系列动画，每个动画名称都是由@keyframes规则定义的。
/* Single animation */
animation-name: none;
animation-name: test_ 05;
/* Multiple animations */
animation-name: test1, arimation4;
设置动画执行时间
animation-dur ation属性用于设置动画执行的时长。默认值为0秒，表示无动画效果。
animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
设置动画执行方式
animation-timing-fu nction属性用于设置动画执行的方式。
/* Keyword values */
animation-timing-function: ease;
animation-timing function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing function: stepTstart;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
设置动画延迟时间
animation-delay属性用于设置动画开始执行之前需要等待的时间。默认值为O秒，表示动画立即执行。
animation-delay: 3s;
animation-delay: 2s, 4ms;
设置动画执行次数
animation-iteration-count属性用于设置动画执行的次数。默认值为1,表示动画只执行一次。
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;
设置动画执行方向
animation-direction属性用于设置动画是否反向执行。
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
设置动画执行状态
animation- play- -state属性用于设置动画是运行还是暂停。通过该样式属性可以确定动画是否正在执行。
animation-play-state: running;
animation-play-state: paused;
设置动画时间外属性
animation-fill-mode属性用于设置动画执行之前和执行之后如何为动画的目标元素应用样式。
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animationf-ill-mode: both;
