文档章节

css3 transition 和 Animation的区别

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

© 著作权归作者所有

共有 人打赏支持
王潭不是王雨潭
粉丝 5
博文 19
码字总数 19745
作品 0
杭州
【React自制全家桶】八、React动画以及react-transition-group动画库的使用

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

漂泊的雾
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

没有更多内容

加载失败,请刷新页面

加载更多

Generator-ES6

基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装...

简心
21分钟前
2
0
FullCalendar日历插件说明文档

普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当...

ada_young
22分钟前
0
0
Redis知识总结--string的内部实现

SDS(Simple Dynamic String) String的数据结构是一个字节数组,但简单的获取数组长度的时间复杂度就是O(n),这对于单线程的redis来讲是不能接受的,因此string在redis中的实现是SDS类,SDS类...

looqy
32分钟前
1
0
SpringBoot开发案例之整合Dubbo分布式服务

前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了。在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使用的 ...

Java干货分享
38分钟前
2
0
美团团购订单系统优化记

团购订单系统简介 美团团购订单系统主要作用是支撑美团的团购业务,为上亿美团用户购买、消费提供服务保障。2015年初时,日订单量约400万~500万,同年七夕订单量达到800万。 目标 作为线上S...

Skqing
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部