css使用定义动画anima,css3,transition,animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js。
其实通常情况下,对于使用js我们更加倾向于使用css来设置动画。
transfrom就不用说了,它本身就一个css属性。
transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。
.demo{
overflow: hidden;
100px;
height: 100px;
position: relative;
}
.aaa{ 100%; height: 50px;
position: absolute; bottom: -50px; opacity: 0;
-webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; -o-transition: all 0.85s ease; -ms-transition: all 0.85s ease; transition: all 0.85s ease; }
.demo:hover .aaa{
opacity: 1;
bottom: 0;
}
transition的属性有transition-property(css属性name,transition效果)、transition-duration(动画持续多少秒)、transition-timing-function(动画的变化过程速度曲线)、transition-delay(动画开始的时候,也就是延迟多少秒)
相对于animation,transition从某种层度上讲,动画控制的更粗一些,它唯一能定义动画变化过程效果的便是transition-timing-function属性,而animation提供的keyframe方法,可以让你手动去指定每个阶段的属性。此外animation还封装了循环次数,动画延迟,反向循环等功能,更加自由和强大。
.animation:before, .animation:after{
content:'';
50%;
height: 100%;
animation: mymove 3s ease-in-out alternate infinite; -moz-animation: mymove 3s ease-in-out alternate infinite; -webkit-animation: mymove 3s ease-in-out alternate infinite; -o-animation: mymove 3s ease-in-out alternate infinite;
}
@keyframes mymove {
from { 50%; }
to { 0%; }
}
这里就不贴出keyframes浏览器适配了。
同时还可以这样想,transition是从:hover延伸出来的,不管是动态设置的还是非动态设置的过渡效果,只要过渡效果指定的属性值发生了变化就会触发过渡效果。
而animation是从flash延伸出来的,使用关键帧的概念,如果是非动态设置的,那么页面加载完后就会触发动画效果;如果是动态设置的,那么设置完后(假设没有设置 delay)就会触发动画效果。后面再改变属性值也不会触发动画效果了,除了一种情况(这种情况不会触发transition定义的过渡效果),就是元素从 display:none 状态变成非 display:none 状态时,也会触发动画效果。
极端条件下,animation占用的资源相应的比transition多,所以如果能用transition实现,就尽量用transition来实现,如果追求复杂更自由的动画,就可以用animation。
css使用定义动画anima,css3,transition,animation两种动画实现区别相关推荐
- Java中的string定义的两种方法和区别
java中的String定义的两种方法和区别 第一种:new方式 String s1 = new String("hello world"); String s2 = new St ...
- php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- h5画三角形_如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- 思科新版EI CCIE 企业网软定义中的VxLAN分布式网关两种部署方式
思科新版EI CCIE 企业网软定义中的VxLAN分布式网关两种部署方式VXLAN集中式网关部署的不足:第一,同一二层网关下跨子网的数据中心三层流量都需要经过集中三层网关转发.第二,由于采用了集中三层 ...
- Unity 让物体同时播放两种动画
在用Unity开发工程中,会遇到需要让一个物体同时播放两种动画的情况,举个简单的例子: 一只小鸟,这只小鸟会拍翅膀,这只小鸟也会按一定的轨迹飞行. 实现这个需求有几种思路: 1. 用动画控制器控制 ...
- css如何设置透明度?设置透明度的两种方法(代码实例)
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
- css动画详解 (transition animation)
属性 transition(4个属性): transition: width 5s ease 3s; /*简写*/transition-property: width; /*过渡属性名*/transi ...
- html头像动画,用CSS3实现头像旋转效动画
这次给大家带来用CSS3实现头像旋转效动画,用CSS3实现头像旋转效动画的注意事项有哪些,下面就是实战案例,一起来看一下. 鼠标未放上效果: 鼠标放上之后旋转效果: transition: all 2 ...
- 【Android】两种动画介绍(Tween动画、Frame动画)
Android中的动画类型有两种,一种是Tween动画.还有一种是Frame动画.Tween动画,这种实现方式可以使视图组件移动.放大.缩小以及产生透明度的变化;另一种Frame动画,传统的动画方法, ...
最新文章
- ssm 实现房屋租赁系统
- 642-832 GNS3 自搭建拓扑
- Gradle for Android 第三篇( 依赖管理 )
- 第十五章 五虎上将中谁最冷血
- 806. Number of Lines To Write String - LeetCode
- selenium + python自动化测试unittest框架学习(一)selenium原理及应用
- CSS快速学习5:文本溢出和XHTML元素分类
- IEEE 802.1x 硬件参加的过程
- PKU/POJ 2054 Color a Tree
- 大数据有哪些分析误区
- 【解决方案修复谷歌翻译 Windows、macOS】谷歌翻译退出了中国市场不能用了
- 思维导图—Git命令全集
- VS2015编译eXosip2-4.1.0 osip2-4.1.0
- 核方法以及核函数讲解
- oracle导入excel乱码,Oracle导出的文件为什么用Excel打开是乱码?
- 根据银行卡号获取logo,并提取图片主题色(小程序版)
- python编程趣味试题_python趣味编程100例 python编程100例
- 微信支付官方揭开刷脸支付神秘面纱
- 1、查询姓名中包含‘u’字母的员工记录2、同名去重3、字段计算
- 大白菜U盘装系统工具,被爆出病毒!
热门文章
- GitHub 终端面基交友的新神器
- 嫁人就嫁程序猿:不说话则已,开口就是段子手
- 王者荣耀服务器什么时候增加人数,王者荣耀2020年健康系统新规则 王者荣耀未成年一天能玩几小时...
- Mac上如何降级系统?Mac系统降级图文教程
- js如何打开编辑服务器端文件夹,js 打开本地或共享文件夹
- 常见的海外广告投放平台,海外社交广告平台的开户流程与要求
- HTTP请求的交互过程和常见的相应状态码
- 七步成诗(事)- 定义问题
- Licode—基于webrtc的SFU/MCU实现
- SafeSignCertReg.exe导致系统工作异常