HTML5/CSS3翻旋动画（一）
日期：2014-05-17 浏览次数：20910 次
HTML5/CSS3翻转动画（一）
翻转动画效果，就是将页面的元素（文字，图片）加入围绕坐标轴翻转的效果，在Webkit内核的浏览器中，很容易实现。而其它内核暂时支持不是很好。首先，我们创建页面：
代码很简单，其中仅包含两个文本信息用于测试。引入jQuery是为了后面的事件绑定，我们使用CSS3的动画支持来展示，那么下面来逐一看看CSS代码：
这段很简单，就是设置页面背景色的。这里可以在FF中看到效果。下面是对文本的CSS支持：
目前我们得到如下效果：
下面设置让文字翻转的CSS3动画：
该段代码的含义是，围绕y轴翻转文字，并在最后文字大小发生变化，并变色。当然如果想沿着x轴旋转，那么使用rotateX就可以了，这很简单。现在在CSS中补加如下代码：
我们可以看到的效果是文字围绕y轴主键变小，并变色，最终合并到y轴，但突然还原。这个效果是没错的，因为我们只有前半部分的动画效果，而后半部分翻转回来的没有设置，也就是我们看到的主键消失但突然出现的效果了。下面继续设置CSS动画，因为翻转过去了还得翻转回来吧：
那么翻转回来我们定义名称为unfilp，此时不设置70%的停顿延时，直接翻转回来即可。我们看到，0%时是和上面flip中100%接上的，scale和color都是一致的。而100%是和flip中0%对应的，那么就可以达到还原的效果了。
此时可以修改-webkit-animation来测试这一步的效果。
好，现在问题来了，我们设置了两个CSS动画，那么怎么应用可以按顺序来执行呢，写到-webkit-animation中使用多个动画效果，好像不支持，或许是我写的不对。那么只好借助js来简单实现了。也就是事件绑定。Webkit中有个事件是webkitAnimationEnd，我们可以将两个动画绑定到这个事件上，就可以达到自动按顺序执行。我们编写一个js函数来达到这个效果：
flip函数定义功能如下：首先判断一下element，当然可以不做，只要在调用的时候保证即可。然后给webkitAnimation赋值，就是我们定义的CSS动画名称和执行的时间。下面就是核心功能所在了。巧妙使用事件绑定和switch的返回机制。将webkitAnimationEnd按照filp动画的名称进行绑定。这里格外注意，element.style.webkitAnimation = "" + flipName + " " + flipTime;一句绑定了正向翻转的CSS动画和时间，那么为了有反向的效果，下面的Switch段是相反的，也就是case filpName时进行unflip动画。
写好了js函数，那么我们来调用：
翻转动画效果，就是将页面的元素（文字，图片）加入围绕坐标轴翻转的效果，在Webkit内核的浏览器中，很容易实现。而其它内核暂时支持不是很好。首先，我们创建页面：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js"></script> <title>Flip Text</title> </head> <body> <div id="cover"> <div id="coverText"> <div id="welcomeStr1">Welcome To HTML5!</div> <div id="welcomeStr2">Hello World!</div> </div> </div> </body>
代码很简单，其中仅包含两个文本信息用于测试。引入jQuery是为了后面的事件绑定，我们使用CSS3的动画支持来展示，那么下面来逐一看看CSS代码：
*{
margin:0px;
padding:0px;
}
#cover{
position:absolute;
width:100%;
height:100%;
min-width: 768px;
overflow: hidden;
background: -webkit-gradient(linear,left top, left bottom, color-stop(0, #00BDF2), color-stop(1, #003D7B));
background: -moz-linear-gradient(top,#00BDF2, #003D7B);
}
这段很简单，就是设置页面背景色的。这里可以在FF中看到效果。下面是对文本的CSS支持：
#coverText {
position: absolute;
left: 18%;
top: 30%;
width:64%;
text-align:center;
}
#welcomeStr1,#welcomeStr2 {
height: 86px;
font-size: 64px;
line-height: 86px;
letter-spacing: 2px;
color: white;
font-family:"Courier New";
-webkit-animation-time-function: linear;
}
目前我们得到如下效果：
下面设置让文字翻转的CSS3动画：
@-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
70% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
100% {
-webkit-transform: rotateY(90deg) scale(0.6,0.7);
color: #3C4043;
}
}
该段代码的含义是，围绕y轴翻转文字，并在最后文字大小发生变化，并变色。当然如果想沿着x轴旋转，那么使用rotateX就可以了，这很简单。现在在CSS中补加如下代码：
-webkit-animation: flip 5s infinite; -webkit-text-size-adjust: none;
我们可以看到的效果是文字围绕y轴主键变小，并变色，最终合并到y轴，但突然还原。这个效果是没错的，因为我们只有前半部分的动画效果，而后半部分翻转回来的没有设置，也就是我们看到的主键消失但突然出现的效果了。下面继续设置CSS动画，因为翻转过去了还得翻转回来吧：
@-webkit-keyframes unflip {
0% {
-webkit-transform: rotateY(90deg) scale(0.6,0.7);
color: #3C4043;
}
100% {
-webkit-transform: rotateY(0deg) scale(1,1);
color: white;
}
}
那么翻转回来我们定义名称为unfilp，此时不设置70%的停顿延时，直接翻转回来即可。我们看到，0%时是和上面flip中100%接上的，scale和color都是一致的。而100%是和flip中0%对应的，那么就可以达到还原的效果了。
此时可以修改-webkit-animation来测试这一步的效果。
好，现在问题来了，我们设置了两个CSS动画，那么怎么应用可以按顺序来执行呢，写到-webkit-animation中使用多个动画效果，好像不支持，或许是我写的不对。那么只好借助js来简单实现了。也就是事件绑定。Webkit中有个事件是webkitAnimationEnd，我们可以将两个动画绑定到这个事件上，就可以达到自动按顺序执行。我们编写一个js函数来达到这个效果：
flip = function(element, flipName, flipTime, unflipName, unflipTime) {
if(!element){
return;
}
element.style.webkitAnimation = "" + flipName + " " + flipTime;
return $(element).bind('webkitAnimationEnd', function() {
switch (element.style.webkitAnimationName) {
case flipName:
return element.style.webkitAnimation = "" + unflipName + " " + unflipTime;break;
case unflipName:
return element.style.webkitAnimation = "" + flipName + " " + flipTime;break;
}
});
};
flip函数定义功能如下：首先判断一下element，当然可以不做，只要在调用的时候保证即可。然后给webkitAnimation赋值，就是我们定义的CSS动画名称和执行的时间。下面就是核心功能所在了。巧妙使用事件绑定和switch的返回机制。将webkitAnimationEnd按照filp动画的名称进行绑定。这里格外注意，element.style.webkitAnimation = "" + flipName + " " + flipTime;一句绑定了正向翻转的CSS动画和时间，那么为了有反向的效果，下面的Switch段是相反的，也就是case filpName时进行unflip动画。
写好了js函数，那么我们来调用：
$(function() {
flip($("#welcomeStr1")[0], 'flip', '1.5s', 'unflip', '0.7s');
flip($("#welcomeStr2")[0], 'flip', '1.5s',
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
