首页
登录 | 注册

CSS动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。

1、transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div{
  transform:scale(2);
}

transition和animation两者都能实现动画效果

transform常常配合transition和animation使用

2、transition样式过渡,从一种效果逐渐改变为另一种效果

transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay

从左到右分别是:css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{
    width:100px;
    height:100px;
    transition:transform 2s;
}
div:hover{
    transform:rotate(180deg);
}

transition通常和hover等事件配合使用,需要由事件来触发过渡

3、animation动画 由@keyframes来描述每一帧的样式

div{
  animation:myAnimation 5s infinite
}
@keyframes myAnimation {
  0%{left:0;transform:rotate(0);}
  100%{left:200px;transform:rotate(180deg);}
}

区别:

(1)transform仅描述元素的静态样式,常常配合transition和animation使用

(2)transition通常和hover等事件配合使用,animation是自发的,立即播放

(3)animation可设置循环次数

(4)animation可设置每一帧的样式和时间,transition只能设置头尾

(5)transition可与js配合使用,js设定要变化的样式,transition负责动画效果,如:

/*css:*/
div{
    width:100px;
    height:100px;
    transition:all 1s;
}
//js
divEle.onclick = function(){
    divEle.style.width = "200px";
    divEle.style.height = "200px";
}

 


相关文章

  • 从css 3d说到空间坐标轴
    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好好说说,这css 3d到底怎么玩. 先上 ...
  • 快三个月没写博客了,一直在忙着准备面试和去面试的路上,所以没时间写,也没什么想写的.现在告一段落,就总结一波! 面经 本人真的是双非一本.为什么加“真的”?因为有的人也写着"双非一本,进入阿里",但是某电子科技大学,比9 ...
  • 补习系列(20)-大话 WebSocket 与 "尬聊"的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 关于分布式锁原理的一些学习与思考-redis分布式锁,zookeeper分布式锁
      首先分布式锁和我们平常讲到的锁原理基本一样,目的就是确保,在多个线程并发时,只有一个线程在同一刻操作这个业务或者说方法.变量. 在一个进程中,也就是一个jvm 或者说应用中,我们很容易去处理控制,在jdk java.util 并发包中已 ...
  • Npoi简单读写Excel
    什么是NPOI ? 简而言之,NPOI就是可以在没有Office的情况下对Word或Excel文档进行读写等操作. 使用方式 : 1.准备NPOI的dll文件 下载链接:https://npoi.codeplex.com/releases ...
  • final关键字可用于修饰类.方法和变量,final修饰的类不能被继承:final修饰的方法不可被重写:final修饰的变量不可被改变. 1. final类 final修饰的类不能被继承意思是final修饰的类不可以有子类,java.lan ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.078 s.
京ICP备10005923号