文档章节

css3 transition 和 Animation的区别

王潭不是王雨潭
 王潭不是王雨潭
发布于 2017/08/30 21:22
字数 412
阅读 24
收藏 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 规定动画是否正在运行或暂停

© 著作权归作者所有

共有 人打赏支持
王潭不是王雨潭
粉丝 6
博文 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与动画有关的属性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
CSS3动画使用技巧与总结

构建css3动画的属性很简单,总的来说只有transform(变形),transition(过渡),和animation(动画)这三种。 所以这里,更少的从介绍语法的角度,而是从使用的角度来介绍css3动画 具体的每...

mooonx
2017/11/29
0
0
对transition,transform,animation的疑惑

名词解释 我们先来看一下百度翻译 最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说). 恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚...

boogoogle
2016/06/14
37
0

没有更多内容

加载失败,请刷新页面

加载更多

二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
2
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
1
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
3
0
Java并发编程:深入剖析ThreadLocal

ThreadLocal 的理解 ThreadLocal,很多地方叫线程本地变量,或线程本地存储。ThreadLocal为变量在每个线程中都创建了一个副本,每个线程可以访问自己内部的副本变量。===》解决的问题是线程间...

细节探索者
昨天
3
0
【Python3之异常处理】

一、错误和异常 1.错误 代码运行前的语法或者逻辑错误 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) def test: ^SyntaxError: invalid...

dragon_tech
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部