Html创建动画的基本过程,在HTML中创建动画

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)来表示放大多少倍，可以取负值

哈哈

跳动的心

#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{

    -webkit-animation:haha 0.6s linear infinite; }

@-webkit-keyframes haha{ 100% {-webkit-transform:scale(-1.5);} } }