Animate动画现在越来越流行,并且对于触屏设备支持良好,特别是对于webkit内核的浏览器支持特别良好。webkit浏览器诸如chrome以及Safari,因此在Android及IOS设备上运行效果是杠杠的。Animate正如flash一样,都是通过帧来控制动画的,如果你之前学习过flash或者使用过adobe flash软件,你就能够明白帧是什么意思了。
一、Animate动画初识
1、浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
2、代码分析
首先我们来看一段Animate的动画代码
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
分析以上代码
首先如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
0%,25%,%50,%75,%100,这几个就是所谓的帧动画效果,意思就是当前状态在0%,25%,%50,%75,%100的时候所需要显示的CSS动画效果。
上面的代码中opacity代表透明度,1即100%,而@-webkit-keyframes以及@keyframes都是一样的,主要是为了浏览器兼容而增加了一个webkit前缀,让webkit浏览器能够识别此代码。
animation-name: flash,此意思是将动画名称命名为flash,加了webkit的是为webkit浏览器做兼容。
当然这样写出来的代码,还并不能实现动画效果,那么要实现动画效果,我们必须激活此动画。
二、如何让动画在相应的css类标签中实现,当窗口滚动到动画处时激活动画
以上面的代码为例,我们将写一个css类来激活这个动画
.animate{
animation:flash 2s both;
-moz-animation:flash 2s both;/* Firefox */
-webkit-animation:flash 2s both; /* Safari and Chrome */
-o-animation:flash 2s both; /* Opera */
animation-play-state: paused;
}
.active .animate{
animation-play-state: running;
}
以上代码中,-moz-为火狐浏览器前缀,-webkit-为chrome及Safari浏览器前缀,-o-为opera浏览器前缀,这样才能兼容所有主流浏览器,不带前缀的即为IE浏览器。
1、animation:flash 2s both;参数说明
第一个参数:name (animation-name):flash即为动画名称
第二个参数:keeping-time (animation-duration):
整个动画的持续时间,必须带上时间单位,s或者ms均可;
第三个参数:animate-function (animation-timing-function):
运动方式(动画方式)的贝赛尔曲线,可取值为:ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
第四个参数:delay (animation-delay):
动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位,如果写成直接写成0,在Chrome和Safari(webkit)下是没问题的,但是在FF(gecko)下无效。
第五个参数:times (animation-iteration-count):
动画循环执行的次数,无单位,infinite为无限循环。
第六个参数:iteration (animation-direction):
如果动画循环,循环的方式是:alternate(偶数次向前播放,奇数次向后播放)、normal(每次都向前播放)。
第七个参数:final (animation-fill-mode):
动画的最后(达到100%)时的状态,取值有:backward(回到初始状态)、forwards(停在最终状态)、none、both。
2、animation-play-state:设置播放与暂停
paused为暂停,running为播放
而其之前加了个.active意思为当窗口滚动到动画部分则激活动画运行。