利用css3实现一个半月形的西瓜，利用queue实现吃西瓜的动画。练习例子
css3:
1、圆角
border-radius:100%;
border-top-left-radius:5px;
2、变形
- 2D旋转：transform: rotate(25deg);(正角度为顺时针，负角度为逆时针)。
- 3D旋转：transform: rotateX(25deg);-----效果为div的高度变小，90deg时高度为0。
- 3D旋转：transform: rotateY(25deg);-----效果为div的宽度变小（左右border同时内缩），90deg时宽度为0。
- 缩放:transform:scale(1,0.5);或transform:scaleX(1);或transform:scaleY(0.5);
- 移动:transform:translate(20px,-10px);或transform:translateX(20px);或transform:translateY(-10px);
- 倾斜:transform:skew(10deg,20deg);或transform:skewX(10deg);或transform:skewY(20deg);
3、动画
animation使用方法：
3.1、利用@keyframes定义动画效果：
@keyframes animateName{
0% {(多个)css规则;}------必备，表示动画开始时的效果
30% {;}------非必备，表示经过了整个动画时间（一个周期）的3/10后的效果
100% {;}------必备（当只有0%和100%是可以用from和to代替），表示动画结束时的效果
}
3.2、在某节点上使用动画，同时定义动画的下列属性，如
div{animation:animateName 2s linear 1s 3;}
其中：
动画的速度曲线animation-timing-function（默认值为ease，常用的为linear）
如果要无限次执行动画，则定义
- animation-iteration-count为"infinite"。
- animation-direction的默认值为
"normal"表示正常播放动画，
"alternate"则表示轮流反向播放动画，即动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
- animation-play-state可控制动画暂停paused或（继续）执行：running。
- animation-fill-mode:表示动画在播放之前和之后，是否可见，默认值为
"none"表示动画播放结束后会回到初始状态，
"forwards"表示动画结束后保持在keyframes中最后一帧100%时的状态，
"backwards"表示在animation-delay的一段时间内，在动画播放之前，应用第一帧的状态，
"both"表示同时应用"forwards"和"backwards"。
练习实例：一个div在前一秒内，top由0到50px，后一秒内，选择一圈且下降到100px，同时慢慢变透明。
@keyframes down{ 0% {opacity:1;top:0;} 50% {opacity:1;top:50px;transform:rotate(0);} 100% {opacity:0;top:100px;transform:rotate(360deg);} } @-webkit-keyframes down{ 0% {opacity:1;top:0;} 50% {opacity:1;top:50px;-webkit-transform:rotate(0);} 100% {opacity:0;top:100px;-webkit-transform:rotate(360deg);} } @-moz-keyframes down{ 0% {opacity:1;top:0;} 50% {opacity:1;top:50px;-moz-transform:rotate(0);} 100% {opacity:0;top:100px;-moz-transform:rotate(360deg);} } @-o-keyframes down{ 0% {opacity:1;top:0;} 50% {opacity:1;top:50px;-o-transform:rotate(0);} 100% {opacity:0;top:100px;-o-transform:rotate(360deg)} } #object1{ animation:down 2s linear forwards; -webkit-animation:down 2s linear forwards ; -moz-animation:down 2s linear forwards; -o-animation:down 2s linear forwards; }
按上面写法，会在object1加载后就立马开始动画。
练习实例1：
这个例子中为了实现默认不开始动画，单击 “开始” 按钮后再开始播放动画，播放结束后单击 "开始" 重新播放动画，
想法是：默认css设置动画不播放：
#object1{ animation:down 2s linear paused forwards; -webkit-animation:down 2s linear paused forwards ; -moz-animation:down 2s linear paused forwards; -o-animation:down 2s linear paused forwards; }
在“开始” 按钮里的事件开始播放动画：
$('#inputTest').click(function(){
$('#objectTest').css('webkitAnimationPlayState','running'); //省略了animationPlayState、mozAnimationPlayState、oAnimationPlayState
setTimeout(function(){ $('#objectTest').css({top:0,opacity:1});},2000);
})
练习实例2：
结果：通过查看html节点，虽然动画播放结束后objectTest的style里已经有了top:0;opacity:1;但是objectTest依然处于动画结束时的状态，调试发现，如果去除它的animation属性，它的状态就会复原了。所以改用添加和删除animation属性所在的类来达到控制动画播放的效果，另外可以用animation有动画结束的对应事件取代setTimeout。
练习实例1的代码其实就是下面这样：
.downAnimation{ animation:down 2s linear forwards; -webkit-animation:down 2s linear forwards ; -moz-animation:down 2s linear forwards; -o-animation:down 2s linear forwards; }
$('#input1').click(function(){
$('#object1').addClass( 'downAnimation');
})
document.getElementById('object1').addEventListener("webkitAnimationEnd", function (e) {
$('#object1').removeClass('downAnimation');
});
......（省略了为animationEnd、mozAnimationEnd、oAnimationEnd添加事件）
animation事件：
共有三个事件：
- animationStart：动画开始时触发（如果有设置延迟animation-delay，是在延迟时间之后触发）；
- animationEnd：动画结束时触发；
- animationIteration：如果有设置animation-iteration-count大于1，则在第一次以后的每一次重复播放时触发。
还可以通过事件函数的参数的elapsedTime属性获得动画开始到此时经过的时间（单位为s，不包括animation-delay时间）。
在js中控制这些属性：
document.getElementById('id1').style.animationPlayState='paused';
document.getElementById('id').style.WebkitAnimationPlayState='paused';
在style中定义：
<div style='animation-play-state: paused;-webkit-animation-play-state: paused;'>
注意：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
4、transition
作用是：当属性改变时，在一定时间内将属性有初始值（平滑的）改变到新的属性值，如：
transition:all 1s ease-in-out;
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property:可为某个特定的属性，如background、width等，也可为all，为none时，将瞬间变化到新属性值
- transition-duration
- transition-timing-function
- transition-delay
具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，某div的width初始为50%，当浏览器改变宽度时，虽然width实际变化的，但是并不会触发transition的效果。
transition也有一个animationEnd事件。
练习实例：移上div时(或是别的事件)，加阴影，字体变粗
#div1{ width:50px;height:50px;
text-align:center;
background:green;color:white; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } #div1:hover{ font-weight:bold; box-shadow:2px 2px 3px gray; }
transition中的属性变化也可以分开写：
transition: background 0.5s ease-in,color 0.3s linear;