CSS 2D Transforms

https://www.w3schools.com/css/css3_2dtransforms.asp

CSS 3D Transforms

https://www.w3schools.com/css/css3_3dtransforms.asp

CSS Transitions

https://www.w3schools.com/css/css3_transitions.asp

CSS Animations

https://www.w3schools.com/css/css3_animations.asp

參考自: https://ithelp.ithome.com.tw/articles/10200712

 Transition、Animation、Transform 三者的差異

名稱 介紹 作用於
Transition 基礎的動畫效果，強調單一CSS屬性的過渡動畫 通常為單一CSS屬性間變化
Animation 細節複雜的動畫效果，強調css屬性的流程與控制，可加keyframes 多種CSS屬性變化
Transform 控制html元素的旋轉、縮放、移動等等 HTML元素(包含內容)變化
名稱 可否自行運作 效能問題
Transition ✗，需要事件或偽類別觸發 另一獨立執行緒處理，較不影響效能
Animation ✔，進入頁面可以直接運行 另一獨立執行緒處理，較不影響效能
Transform ✔，進入頁面可以直接運行 因會操作HTML元素運算，因此必須考慮效能
  • animation可以說是包含很多個transition控制的屬性，transition是大略的CSS屬性變化，animation可以做出更細節的部分
  • transform可以在animation中當作屬性被運用
  • animation和transform可直接運行原因為都有指定屬性“值”的變換，而transition沒有

其他參考網站:

https://adon988.logdown.com/posts/4729740-css3-animation-notes

https://ithelp.ithome.com.tw/articles/10197303

https://boohover.pixnet.net/blog/post/35341387-%E6%97%8B%E8%BD%89%E3%80%81%E5%82%BE%E6%96%9C%E3%80%81%E7%B8%AE%E6%94%BE%E7%9A%84%E8%AE%8A%E5%BD%A2%E6%95%88%E6%9E%9C-transform-%28css-prope

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://blog.csdn.net/yujin0213/article/details/79262825

https://www.oxxostudio.tw/articles/201502/css-bounce.html

CSS製作動畫效果(Transition、Animation、Transform)的更多相关文章

  1. 【WIN10】Storyboard動畫板

    源碼下載:http://yunpan.cn/cFJR5zcMNtBq6  访问密码 ac7a 使用Storyboard可以實現動畫效果. 1.仿照WINDOWS系統安裝時的等待畫面,不停更換背景顏色 ...

  2. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  3. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  4. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  5. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  6. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  7. vue動畫和過渡

    過渡: 插入.更新和溢出DOM時,提供不同的方式應用過渡效果: vue提供內置的封裝組件,用於包裹要實現過渡效果的內容. <transition name="a">&l ...

  8. jquery 動畫

    animate({param},speed,callback)/animate({param},speed)/animate({param}) param表示css屬性:屬性名必須是camel標識法: ...

  9. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

随机推荐

  1. python关于time几种格式处理方法总结

    一.日期时间的表示方法: 时间戳 timestamp: 简介:时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量,是一个float类型 展示形式:1575278720.331 时间 ...

  2. Alpha冲刺(7/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  3. 用Queue控制python多线程并发数量

    python多线程如果不进行并发数量控制,在启动线程数量多到一定程度后,会造成线程无法启动的错误. 下面介绍用Queue控制多线程并发数量的方法(python3). # -*- coding: utf ...

  4. python获取参数列表

    def f(a=1, b=2, c=3): print(locals())#在函数内获取 #使用inspect模块,简单方便 python2.7: import inspectinspect.geta ...

  5. C++内存分配/分布——堆栈存储区

    FROM: C++内存分配方式详解——堆.栈.自由存储区.全局/静态存储区和常量存储区 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数等 ...

  6. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  7. 认识Dump文件

    一.什么是Dump文件 又叫内存转储文件或者叫内存快照文件.是一个进程或系统在某一给定的时间的快照.比如在进程崩溃时或则进程有其他问题时,甚至是任何时候,我们都可以通过工具将系统或某进程的内存备份出来 ...

  8. FOREIGN KEY 外键约束； UNIQUE和PRIMARY KEY 主键约束、CREATE INDEX建立索引的使用

    1)foreign key 是个约束,意思是说如果你给A字段设置了外键约束,以后你要往A字段插入数据,这个数据一定是要在foreign key 后面跟的那个字段中存在的值.这个的意义就是约束了数据的完 ...

  9. 洛谷 P1508 Likecloud-吃、吃、吃 题解

    P1508 Likecloud-吃.吃.吃 题目背景 问世间,青春期为何物? 答曰:"甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!" 题目描述 正处在某一特定时期之中的李大水牛由于消化 ...

  10. 缺失值处理（Missing Values）

    什么是缺失值?缺失值指数据集中某些变量的值有缺少的情况,缺失值也被称为NA(not available)值.在pandas里使用浮点值NaN(Not a Number)表示浮点数和非浮点数组中的缺失值 ...