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动画transform、transition和animation的区别的更多相关文章

  1. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  2. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  3. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  4. 前端深入之css篇丨2020年前,彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  5. css3动画:transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  6. css3 transition和animation的区别与联系

    1. transition 一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性: transition-property:动画展示哪些属性,可以使用all关键字: transition ...

  7. 30分钟玩转css3动画, transition,animation

    其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...

  8. CSS3中transform,transition和animation的简单介绍和使用方法演示样例

    transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性. transition是一个属性.它是用来控制过渡效果的,由于用transfor ...

  9. CSS动画之transition属性

    transition 属性 简介 transition(过渡)) 是指从一个状态到另一个状态的变化.比如当鼠标在某个元素上悬停时,我们会修改它的样式,采用 transition 可以创建一个平滑的动画 ...

随机推荐

  1. PHP设计模式系列 - 观察者模式

    观察者模式 观察者设计模式能够更便利创建和查看目标对象状态的对象,并且提供和核心对象非耦合的置顶功能性.观察者设计模式非常常用,在一般复杂的WEB系统中,观察者模式可以帮你减轻代码设计的压力,降低代码 ...

  2. [DAViCHi/SeeYa/T-ARA][원더우먼][Wonder Woman]

    歌词来源:http://music.163.com/#/song?id=5371229 作曲 : 赵英秀 [作曲 : 赵英秀] [作曲 : 赵英秀] 作词 : K-Smith [作词 : KSmith ...

  3. ECharts 定制 label 样式

    起因 实现对 label 的样式定制,自定义字体颜色.大小等属性:效果如下图 实现   itemStyle: {   normal: {   color: '#f7ba0e',   label: { ...

  4. Jinja2 简明使用手册

    @Jinja2 简明使用手册(转载) 介绍 Jinja是基于python的模板引擎,功能比较类似于于PHP的smarty,J2ee的Freemarker和velocity. 运行需求 Jinja2需要 ...

  5. amcharts属性

    Amcharts的特点包含: *动画或静态 *价值轴能够扭转 *线性或对数轴的价值尺度 *提前定义或定制的子弹 *定制描写叙述不论什么数据点 *点击栏目/酒吧(可用于钻孔下来图表) *梯度弥漫 *价值 ...

  6. [JSOI2008]火星人

    嘟嘟嘟 嗯. splay维护哈希. 如题,用splay维护哈希,查找的时候二分.所以复杂度是取决于询问复杂度:\(O(n \log^ 2{n})\). 这道题还有一个技巧,就是一个节点记录的是他的子树 ...

  7. 【转】 iOS播放视频时候,忽略设备静音按钮

    用户有时会在静音模式下观看视频,如果不主动设置的话,视频是没有声音的,通过AVAudioSession可开启以视频为主导的播放模式, 首先需要导入,AVFoundtion.framework,在控制播 ...

  8. 随手练——Uva-11584 划分成回文串(区间DP)

    思路:dp[i]代表到第i位的最小值,枚举它的前几位,求出最小值. 转移方程:dp[ i ] = min(dp[ i ], dp[ j - 1 ] + 1 ) ; 本来觉得,代码加深部分可以提前bre ...

  9. mongodb的学习-5-概念解析

    http://www.runoob.com/mongodb/mongodb-databases-documents-collections.html mongodb中基本的概念是文档.集合.数据库 S ...

  10. pm2踩过的坑

    pm2实现一键部署,能将github上的代码拉到服务器,但是死活就是起不了服务. pm2部署命令: pm2 deploy ecosystem.json production setup pm2 dep ...