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. 功能更新 | medini analyze — 符合ISO 26262的功能安全平台工具

            汽车电子电气系统的功能安全随着智能驾驶.新能源等新兴技术的发展而愈发受到重视.在国际功能安全标准ISO 26262的落地过程中遇到了很多的棘手问题:如何正确而有效地实施HARA以得到合 ...

  2. danci2

    composite 英 ['kɒmpəzɪt] 美 [kɑm'pɑzɪt] n. 复合材料:合成物:菊科 adj. 复合的:合成的:菊科的 vt. 使合成:使混合 a composite of 网络释 ...

  3. PHP——file_put_contents()函数

    前言 作为PHP的一个内置函数,他的作用就是将一个字符串写入文件 简介 使用 换行和追加写入 file_put_contents('./relation/bind.txt', $val['id'].' ...

  4. makefile的三个变量

    “$@”代表目标文件. “$^”代表所有的依赖文件. “$<”代表第一个依赖文件. main:main.o mytool1.o mytool2.o gcc -o $@ $^ .c.o: gcc ...

  5. B君的历史——复数乘法&&爆搜

    题意 设 $r = \frac{-1+\sqrt7 i}{2}$,对任意整数 $x, y$ 都可以找到一个有限的整数集合 $S$,使得 $$x + y\sqrt7 i = \sum_{k \in S ...

  6. Node.js是什么？提供了哪些内容？

    什么是Node.js? Node.js是基于Chrome V8 引擎的 JavaScript运行时(运行环境). Node.js提供了哪些内容? Node.js运行时,JavaScript代码运行时的 ...

  7. 1、HDFS 架构、启动过程

    Hadoop Distributed File System 易于拓展的分布式文件系统 运行在大量普通廉价机器上,提供容错机制 为大量用户提供性能不错的文件存取服务 NameNode Namenode ...

  8. SpringCloud组件Eureka

    什么是微服务架构 架构设计概念,各服务间隔离(分布式也是隔离),自治(分布式依赖整体组合)其它特性(单一职责,边界,异步通信,独立部署)是分布式概念的跟严格执行SOA到微服务架构的演进过程作用:各服务 ...

  9. JS 不声明第三个变量的情况下实现两数变换

    1. var a = 1; var b = 2; a = a + b; b = a - b; a = a - b; console.log(a); console.log(b); 2. var a = ...

  10. (浙江金华)Day 1 组合数计数

    目录 Day 1 组合计数 1.组合数 (1).C(n,m) 读作n选m,二项式系数 : (2).n个东西里选m个的方案数 不关心选的顺序: (3).二项式系数--->多项式系数: 2.组合数计 ...