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. 快捷定位目录 z武器

    z的源码在这里:https://github.com/rupa/z/blob/master/z.sh 1.把源码复制到你的用户目录下的z.sh文件, 2.然后用vim打开.bashrc这个目录,在最后 ...

  2. Luogu P2280/ACAG 0x03-1 激光炸弹

    Luogu P2280/ACAG 0x03-1 激光炸弹 这道题要用到二维前缀和. 首先读入时,令$a[x][y]=val$: 然后不难递推出$s[i][j]=s[x-1][y]+s[i][j-1]- ...

  3. 洛谷 P1816 忠诚题解

    题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...

  4. HttpClient代码设置代理

    由于对接faceBook接口,本地测试时候要设置代理才能调试. (http和https通用) public SSLContext createIgnoreVerifySSL() throws NoSu ...

  5. linux下安装Sublime Text3并将它的快捷方式放进启动器中和卸载Sublime

    Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...

  6. 初学FWT(快速沃尔什变换) 一点心得

    FWT能解决什么 有的时候我们会遇到要求一类卷积,如下: Ci=∑j⊕k=iAj∗Bk\large C_i=\sum_{j⊕k=i}A_j*B_kCi​=j⊕k=i∑​Aj​∗Bk​此处乘号为普通乘法 ...

  7. 决策树——C4.5

    -- coding: utf-8 -- """ Created on Thu Aug 2 17:09:34 2018 决策树ID3,C4.5的实现 @author: we ...

  8. The BEST way for YOU to learn English,https://www.youtube.com/watch?v=508wFMG9ZP4

    opportunityoppositeappreciatesappropriate.approximate.approachcan't.seriesseriouscommon prettycasual ...

  9. Minidumps 和 modules匹配

    简介 调试应用程序时,调试器必须加载可执行模块的符号,以便能够显示有意义的调用堆栈.当前源代码行.变量值等.如果您曾经调试过在另一个系统上创建的小型转储,那么您已经知道除了符号之外,调试器还需要访问创 ...

  10. 28-ESP8266 SDK开发基础入门篇--编写wifi模块TCP 客户端程序(官方API版,非RTOS版)

    https://www.cnblogs.com/yangfengwu/p/11432795.html 注:这节实现的功能是WIFI模块作为TCP 客户端,连接咱的TCP服务器,然后实现透传 本来想着做 ...