文档章节

对transition,transform,animation的疑惑

boogoogle
 boogoogle
发布于 2016/06/14 17:48
字数 905
阅读 58
收藏 0

名词解释

好吧,如果仅仅是按照百度字典的解释,我根本分辨不出,变换,变化,转换/化的意义
  • 我们先来看一下百度翻译
    transition: 过渡,转变,变迁; [语] 转换; [乐] 变调;
    transform: 变换; 改变; 改观;
    translate: 翻译; 转化; 解释;
    animation: 生气,活泼;  动画片制作,动画片摄制;动画片
    
  • 最后一个animation可以理解,就是动画的意思,类似flash里面的祯动画(你没听过的话就当我没说).
  • 恩恩,颤抖吧!!!英语渣的程序员们.其余三个果然是傻傻分不清楚.
  • 我来举个例子,说明一下这些的区别.
    1. animation就像动画片的制作一样,你需要先把每一页(@keyframes)提前画出来,然后他们先后展示,就组成了动画.注重的是场景的变化,你可以让页面中元素的多个属性进行变化,想改变什么,就改变什么.
    2. transform倾向于变换,比如自己变大变小,扭曲,旋转等,它指定了几种常见的.简单的动画.你拿过来就可以用,不用再自己绘制每个场景了,但是同样的,改变是有限的,你只能按照它给的那几个属性来操作.
    3. translate是transform中常见的.简单的动画中的一种,就是简单的改变元素的宽高
    4. transition是过渡,倾向于描述变化过程,是的以上所有的变化都是需要一个时间来完成的.那么这段时间是多长?变化是匀速还是先快后慢?是立即执行还是等会再说.

      注意

      • transform经常与transition一起使用,对于animation需要自己设置,且transition对animation不起作用
      • 这里的 变化过程不是仅指这里的transform,而是任何的CSS变化,比如一个蓝色的div本来是隐藏的,你通过JS让其 "display:block"了,那么当前显示出来的时候,就要受到这个transition的控制.animation是自行设置的
      • 同时也说明,如果你要使用transform改变元素的某些属性(比如transform改变宽高)的时候,你也需要设置transition来控制这些动画的过程,最起码你的设置个"动画持续时间"和"all",不然动画是不会执行的. 点击这里试试
    transition: -> 我就看你怎么变 -> 
    transform: -> 我就变这几个属性  -> 
    translate: -> 拉长拉高   -> 
    animation: -> 动画片   -> 
    
  • 接下来是参数 transition:该是一个简写属性.
    • transition-property :一般写all. 都有哪些属性的变化由我控制?
    • transition-duration : 动画持续的时间,必须写单位(比如:2s)
    • transition-timing-function : 动画是平滑进行,还是先快后满等?linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    • transition-delay : 延迟多少时间才开始动画
transition:all 2s ease-in-out .5s
  • animation : 这也是一个简写属性
    • animation-name: 祯动画的名字
    • animation-duration: 动画持续的时间
    • animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n)
    • animation-delay: 延迟多长时间才开始动画
    • animation-iteration-count: 动画应该播放的次数 n(具体数字)|infinite(反复播放)
    • animation-direction:是否应该轮流反向播放动画 normal(默认正常播放)|alternate(轮流反向播放);

© 著作权归作者所有

共有 人打赏支持
boogoogle
粉丝 10
博文 100
码字总数 26332
作品 0
昌平
前端工程师
私信 提问
深入CSS3 动画效果的总结详解

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

mjx陌上花开
2014/04/07
0
0
图片轮播css实现

html 部分 <div class="csslider1 autoplay"> <input name="csanchor1" autocomplete="off" id="csslide10" type="radio" class="csanchor slide" > <input name="csanchor1" autocomplete=......

bengozhong
2016/08/17
117
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
HTML CSS笔记变形效果-过渡效果-动画效果

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

菜鸟不菜么
2018/05/01
0
0
CSS3与动画有关的属性transition、animation、transform对比

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

蓓蕾心晴
2017/06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
38分钟前
1
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部