文档章节

css3 transition 和 Animation的区别

王潭不是王雨潭
 王潭不是王雨潭
发布于 2017/08/30 21:22
字数 412
阅读 29
收藏 0

简述

css3 新增动画功能,使开发人员不用js或者flash就能实现页面的动态效果。css3提供两种实现动画效果的方式:transition,animation

  • transition:控制元素从一个状态到另一个状态之间的过渡
  • animation:控制元素从包含多种状态的帧到帧之间的变化

transition

  • 每一个需要过渡的属性的两种状态都必须是明确的
  • 可以简单的通过伪类 :hover, :focus, :active, :target触发
  • 包含四种属性 transition-property(过渡的属性), transition-duration(过渡的时间), transition-timing-function(过渡的时间曲线), transition-delay(过渡效果的开始时间)
  • 所有有中间状态的属性才会有过渡效果
  • 可以过渡的属性的值:color、length、visibility、font-size、z-index、number、font weight、percentage等

animation

  • 弥补了transition不能一次控制多个属性的不足
  • 使用@keyframes定义animation,其中包含animation名字,何任意的animation断点。 例如:
//动画定义,一个名叫slide的animation
@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
//动画触发,在class为ball的元素上触发slide动画,动画持续时间为两秒
.stage:hover .ball {
  animation: slide 2s linear;
}
  • 其中0%和100%可用from和to代替
  • animation 有四个属性,animation-name动画名字、animation-duration动画时长、animation- timing-function(动画的时间曲线)、animation-delay(动画延时)
  • animation-iteration-count 控制动画重复的次数,其值可为一个整数或关键字infinite
  • animation-direction 动画播放的方向可选normal、reverse、alternate、alternate-reverse
  • animation-fill-mode 规定动画时间之外的状态
  • animation-play-state 规定动画是否正在运行或暂停

© 著作权归作者所有

王潭不是王雨潭
粉丝 8
博文 19
码字总数 19745
作品 0
杭州
私信 提问
【React自制全家桶】八、React动画以及react-transition-group动画库的使用

React动画通常有三种方法实现从易到难为: 1、transition(CSS3自带) 2、animation(CSS3自带) 3、react-transition-group动画库(需要引入插件) 一、transition(CSS3自带) 1、用法示例...

漂泊的雾
2018/08/02
0
0
CSS3的过渡,动画,图形转换

CSS3的学习小节 迟来的CSS3学习,在CSS3中,增加了许多的新特性,像过度动画,圆角,媒体查询...等等新的特性,可以给我们开发者日常使用。 过渡 过度动画关键字【transition】 transition :...

wangly19
04/28
0
0
好程序员web前端系列之css3动画

好程序员web前端系列之动画,CSS3属性中有关于制作动画的三个属性: transform,transition,animation keyframes @keyframes mymove{ from{初始状态属性} to{结束状态属性} } 或 @keyframes m...

好程序员IT
05/08
0
0
CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer ...

蓓蕾心晴
2017/06/02
0
0
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

对话亲历者|鲁肃:我在支付宝“拧螺丝“的日子

摘要: 他是支付宝技术平台的奠基人之一,但是他总说“这还不是我心中最完美的架构”;他行事低调但却有着“此时此地,非我莫属”的豪气;他曾无数次充当救火大队长,但自评只是“没有掉队的...

阿里云云栖社区
15分钟前
1
0
设置 npm yarn 淘宝源

设置npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver设置yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"......

internetafei
24分钟前
0
0
Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/mysql、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
47分钟前
10
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
48分钟前
2
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部