1、Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
2、当我们在 @keyframes 中创建动画时,要捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
(1)规定动画的名称(2)规定动画的时长
3、注释:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
4、动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,一般应该始终定义 0% 和 100% 选择器。
5、animation 属性是一个简写属性,用于设置六个动画属性:①animation-name ②animation-duration ③animation-timing-function ④animation-delay ⑤animation-iteration-count⑥animation-direction
6、animation语法:animation:name duration timing-function delay iteration-count direction
name:选择需要绑定到选择器的@keyframe名称
duration:规定完成动画所花费的时间,以秒或毫秒记
timing-function:规定动画的速度曲线(linear为线性的,从头到尾的速度是相同的;ease为默认值,动画以低速开始,然后加快,在结束前变慢;ease-in:动画以低速开始;ease-out:动画以高速开始;ease-in-out:动画以低速开始和结束;cubic-bezier(n,n,n,n):在cubic-zezier函数中的值,可能是从0到1之间的值)
delay:规定在动画开始之前的延时
iteration-count:规定动画应该播放的次数(n为定义的播放的次数;infinite为无限循环播放)
direction:规定是否该轮流反向播放动画(normal为默认值,正常播放;alternate为轮流反向播放)
7、实例:一颗跳动的心,在鼠标移到这颗心上的时候,心的大小发生变化,用scale(n)来表示放大多少倍,可以取负值
哈哈
<!DOCTYPE html>
<html>
<head>
<title>跳动的心</title>
<meta charset="utf-8" />
<style type="text/css">
#heart {
position: relative;
top: 60px;
left:50px;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
}
#heart:hover{<pre name="code" class="html" style="line-height: 18px;"> <!-- 用animation定义动画的名称为haha-->
-webkit-animation:haha 0.6s linear infinite; }
<!-- 用@keyframes定义动画效果,-WebKit为规定为在谷歌中运行有效-->
@-webkit-keyframes haha{ 100% {-webkit-transform:scale(-1.5);} } }</style></head><body><div id="heart"></div></body></html>