css3中过渡和动画的区别是什么?

transition 过渡

让css变化平滑一些

属性:

属性描述
transtion-property指定过渡的属性
transtion-duration指定过渡所需时间
transtion-timing-function指定过渡函数
transtion-delay指定过渡延迟时间

语法:

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;    //合在一起

栗子:

<style>img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}</style>

transition的优点在于简单易用,但是它有几个很大的局限。

  • transition需要事件触发,所以没法在网页加载时自动发生。
  • transition是一次性的,不能重复发生,除非一再触发。
  • transition只能定义开始状态和结束状态,不能定义中间状态。
  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

animation 动画

通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果

属性:

属性描述
animation-name指定关键帧动画的名字
animation-duration指定动画播放所需时间,单位秒
animation-timing-function指定动画播放方式
animation-delay指定动画开始时间,单位秒
animation-iteration-count指定动画的播放次数,默认为1,若为infinite,则无限次循环播放
animation-direction指定动画的播放方向,默认为normal,若为alternate,即轮流反向播放

制作动画分为两部分:

  1. 用关键帧声明一个动画
  2. 在animation调用关键帧声明的的动画。

@keyframes就是关键帧,一个动画中可以有很多个帧。
一个@keyframes中的样式规则是由多个百分比构成的,可以在这个规则上创建多个百分比,从而达到一种不断变化的效果。

栗子:

<style>
    img{
        width:90px;
        height:90px;
        animation: mychange 1s infinate 1s;
        -webkit-animation: mychange 1s infinate 1s;
    }
    
    @keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
    @-webkit-keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }</style>

上面代码中的0% 100%的百分号都不能省略,0%可以由from代替,100%可以由to代替。要让mychange动画有效果,就必须要通过CSS3 animation属性来调用它。

css过渡与动画的区别

其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。

1)动画不需要事件触发,过渡需要。

2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

Image placeholder
前端答疑
未设置
  29人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

dreamweaver和css的区别是什么?

DreamweaverAdobeDreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业

jsp和css的区别是什么?

jsp是什么?JSP全名为JavaServerPages,中文名叫java服务器页面,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码;标签通常以结束。JSP技术有点类似ASP

SOA架构和微服务架构的区别是什么?

来源:rrd.me/fqdANSOA架构和微服务架构的区别首先SOA和微服务架构一个层面的东西,而对于ESB和微服务网关是一个层面的东西,一个谈到是架构风格和方法,一个谈的是实现工具或组件。1.SOA

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

bootstrap和vue的区别是什么?

Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得Web开发更加快捷

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

jquery不同版本的区别是什么?

目前jQuery有三个大版本:版本描述1.x兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.42.x不兼容ie678,很

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

jQuery中this和$(this)的区别是什么?

jQuery中this和$(this)的区别是什么?●$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;●this中存放的是DOM元素,属于jav

jQuery on()和click()的区别是什么?

jQueryon()和click()的区别是什么?●click()属于静态加载,当页面加载完,就不再为新增加的元素添加点击事件。●on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必

jquery和js的区别是什么?

jquery和js的区别是什么?一、首先来看一下jQuery和js的概念jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。js是一种脚本语言,常用于网页客户端

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

jquery text() val() html()之间的区别是什么?

jquerytext()val()html()之间的区别是什么?●text()获取元素内的文本,相当于js中的innerText●val()获取表单元素的值,相当于js中的input.value●ht

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

jquery ===和==的区别是什么?

jquery===和==的区别简单来说,===与==的区别是,===比较刻薄,==相对来说比===温柔一些。==,两边值类型相同时,等同于===;不同的时候,要先进行类型转换,再比较。而===,不做类

ajax与jquery的区别是什么?

jQuery是javascript的一个框架,也就是有人做好了很多功能,你直接拿来用就好了。比如实现Ajax。纯javascript,你可能需要些好多函数,来新建对象,捕捉事件,处理异常等。但用jQu

jquery中on()和click()的区别是什么?

on()和click()的区别:click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。二者在

jquery中bind与on的区别是什么?

jquery中bind与on的区别bind和on都是事件绑定,都是给元素绑定事件用的,但是两者却又有着一个大区别:事件冒泡(事件代理)。事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去

jquery this与$(this)的区别是什么?

$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;而this中存放的是DOM元素,属于javascirpt中的DOM元素对象,要使用DOM元素对象

jquery中children()和find()的区别是什么?

jquery中children()和find()的区别children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行

weex和React Native的区别是什么?

weex简介:weex是阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架特点:Lightweight:轻量级,语法简单,易于使用Extendable:可扩展,丰富内置组件,可扩展的A

jquery和zepto的区别是什么?

jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web2.0应用程序