文档章节

css3 transition 和 Animation的区别

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

© 著作权归作者所有

共有 人打赏支持
王潭不是王雨潭
粉丝 4
博文 18
码字总数 16942
作品 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
css3全部样式兼容性大纲

前言 本文对所有的css3特性浏览器的支持性进行了全量枚举,希望对项目的技术选型以及兼容方案有所帮助,对css3采用正确的打开方式。 测试环境: Chrome, Firefox, Internet Explorer 8 ,IE-...

Tolonger
01/05
0
0
对transition,transform,animation的疑惑

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

boogoogle
2016/06/14
37
0
CSS3 @keyframes animate

1.@keyframes定义和用法 通过 @keyframes 规则,您能够创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您能够多次改变这套 CSS 样式。 以百分比来规定改...

leona_lily
2015/08/06
0
0
Transform/Transition/Animation的区别与联系

Transform,变形: 首先,它的作用是变形,它是静态的!它是静态的!它是静态的!重要的话说三遍!它就像普通的CSS width/height/color属性一样,让元素展现不同的style,一旦元素被施上tra...

Iuranus
2015/11/25
415
0
Vendor Prefix:为什么需要浏览器引擎前缀

浏览器引擎前缀(Vendor Prefix)是什么? Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏...

L3ve
2014/04/30
0
0
HTML CSS笔记变形效果-过渡效果-动画效果

一.transform CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 对于 transform 的属性值,具体如下表: //向...

菜鸟不菜么
05/01
0
0
前端——css3动画总结

CSS3中的三种动画: tranform形变动画 tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition缓动动画 transition: property duration timing-function delay;......

fycool
2016/09/20
28
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
0
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
0
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部