Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

CSS3中Animate动画解析

Posted on 2015年9月6日 by king2088

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意思为当窗口滚动到动画部分则激活动画运行。

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme