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. ArrayList 与LinkedList 的区别及分别的优缺点

    ArrayList,与LinkedList都是属于实现了List接口的类.首先从名字前缀开始看  ,Array表示数组,Link表示链表. 所以ArrayList底层是基于动态数组的.而LinkedL ...

  2. 关闭centos大页及swappiness

    首先检查THP的启用状态: [root@localhost ~]# cat /sys/kernel/mm/transparent_hugepage/defrag [always] madvise ne ...

  3. SparkSQL读写外部数据源--数据分区

    import com.twq.dataset.Utils._ import org.apache.spark.sql.{SaveMode, SparkSession} object FileParti ...

  4. MySQL 日期格式化，取年月日等相关操作

    日期取年.月.日 select id, phone,time,year(time),month(time), DAY(time),TIME(time) from user where phone='x ...

  5. hasura skor 构建安装

    hasura skor 前边有介绍过是一个挺不错的event trigger 插件,我们可以用来进行事件通知处理 官方有提供构建的方法,但是有些还是会有点问题,所以结合构建碰到的问题,修改下 clon ...

  6. HTML5 文件读取

    一.定义 input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名):file类型的input会有files属性,保存着文件的相关信息 ...

  7. C# VS 调试 动态加载的 DLL

    原文:https://www.cnblogs.com/DasonKwok/p/10510218.html 在这篇文章的底部,有提供示例的Demo,可以参考一下哦,拿来直接就可以运行. 说明: 编译类库 ...

  8. linux命令之------Linux文件系统具体目录

    Linux文件系统具体目录 (1)/  Linux文件系统的入口,也是处于最高一级的目录 (2)/bin  系统所需要的那些命令处于此目录,比如Is,cp,mkdir等命令:功能和/usr/bin类似 ...

  9. HAProxy+Keepalived高可用负载均衡

    一 基础准备 1.1 部署环境及说明 系统OS:CentOS 6.8 64位 HAProxy软件:HA-Proxy version 1.5.18 Keepalived软件:keepalived-1.3 ...

  10. 从0开始部署GPU集群-1：k8s部署生态

    1 k8s:nvidia deepops 2  批处理:华为volcano 3 工作流:argo