变换:分为2d变换和3d变换,但一次只能用一个变换属性,多个的话最后一个会覆盖前面所有最终被浏览器实现,变换可以成为过渡和动画的一个待变参数(类似width,opacity等)。

过渡:是动画的初始模型和极简实现,只有初始状态(初始帧)和激活状态(结束帧)。

动画:可定义初始帧、中间帧、结束帧,通过多帧、细节的控制可以实现内容更丰富的动画。

过渡和动画的区别

动画类型 是否必须要有触发事件 状态保持情况 关键帧
过渡

在事件内,可一直保持状态;

在事件结束后,可按照过渡属性再恢复至原始状态

只有初始帧(正常状态)、结束帧(事件状态)
动画 否,定义在元素上可以直接开始,也可以由事件(如hover)触发 在事件内,只按照动画属性执行一次,执行结束后,可不必等待事件结束,就恢复至原始状态 除了初始帧、结束帧,可以设置多个中间帧,动画控制更精确、动画内容更丰富

动画在为页面添加交互动效方面起到至关重要的作用,在今后的工作中,这块的东西也要加深学习力度。

css3中的变换、动画和过渡的更多相关文章

  1. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  3. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  4. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  5. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  6. css3中变形与动画(一)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  7. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  8. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  9. css3中变形与动画(二)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. 【bzoj2152】【聪聪可可】【点分治】

    [问题描写叙述] 聪聪和可但是兄弟俩.他们俩常常为了一些琐事打起来,比如家中仅仅剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(但是他们家仅仅有一台电脑)--遇到这样的问题,普通情况下石头剪刀布就好 ...

  2. Java基础面试:集合、内部类、线程

    package test; import java.util.Hashtable; import java.util.Map; public class test { public static St ...

  3. 设置ArcGIS的数据源

    我从别的地方拿到一份现成的地图文档(*.mxd),在该服务器上运行得好地地,图文并茂,但用我自己机器的arcMap打开就一片空白,啥都没有. 看左边的各个图层目录,图标上都有个粉红色的惊叹号,醒悟过来 ...

  4. 密码过期导致Oracle process耗尽问题

    oracle忽然连不上! 大致是报这样的错: ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程序 ORA-12520: TNS: 监听程序无法为请求的服务器类型找到可用的处理 ...

  5. 图片懒加载和UA池,UA代理池

    1,动态数据加载的处理 图片懒加载概念: 图片懒加载是一种页面优化技术.图片作为一种网络资源,在被请求时也与静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面首屏加载时间 ...

  6. Codeforces 768 E. Game of Stones 博弈DP

    E. Game of Stones   Sam has been teaching Jon the Game of Stones to sharpen his mind and help him de ...

  7. ps -ef | grep

    ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/jdk1.5. ...

  8. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  9. string operation in powershell

    https://blogs.technet.microsoft.com/heyscriptingguy/2014/07/15/keep-your-hands-clean-use-powershell- ...

  10. YTU 2912: 圆柱体的C++

    2912: 圆柱体的C++ 时间限制: 1 Sec  内存限制: 128 MB 提交: 333  解决: 133 题目描述 小明的弟弟加入的C++兴趣小组,组长布置的第一个任务就是将已有的C程序改写成 ...