CSS製作動畫效果(Transition、Animation、Transform)
2024-09-23 21:42:39
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://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
最新文章
- bootstrap 无限极菜单
- [书目20160624]Android应用开发从入门到精通
- 【转】Python yield 使用浅析
- 让IE7 IE8支持CSS3 background-size属性
- SharePoint 基于 REST API使用简介
- 探秘Java中String、StringBuilder以及StringBuffer
- USACO Section 3.3: A Game
- C#的提交表单方式WebClient
- 使用Sass预定义一些常用的样式，非常方便（转）
- static的用途
- Linux命令后台执行技巧小结
- OutputDebugString 输出信息到调试器
- Android基础【1】杀死进程（强行停止）应用程序的方法
- SQL 是一门美丽的语言 她来自艺术
- JFrame图形界面 ----绝对布局和按钮
- CEPH集群操作入门--部署和运维
- CUDA编程模型——组织并行线程2 （1D grid 1D block）
- ASP.NET -- WebForm -- 给图片添加水印标记
- Maven 本地仓库，远程仓库，中央仓库，Nexus私服，镜像 详解
- 通过javascript的日期对象来得到当前的日期，并输出--内置对象---JS