复习css3的部分属性

利用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：

object1

这个例子中为了实现默认不开始动画，单击 “开始” 按钮后再开始播放动画，播放结束后单击 "开始" 重新播放动画，

想法是：默认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：

objectTest

 结果：通过查看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;
}

div1

transition中的属性变化也可以分开写：

transition: background 0.5s ease-in,color 0.3s linear;