关闭

CSS3动画transform、transition和animation的区别

时间: 2018-12-17阅读: 2675标签: 动画

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";
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1622

值得你收藏的10个CSS3动画工具

在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

多段动画整合为一个动画的思路

这是从一个项目中提取的需求。 大致的思路是: 通过获取后端的一系列人员的点位信息,在前端模拟人员的一段时间内的行动过程。我们的开发人员首先想到的思路是,把获取的点位列表信息,每两个取取来,组成一条直线路径

为什么要用css动画替换js动画?

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大

jquery处理动画累加

日程提醒(跟日历一样的切换效果),只用一个div来展示当天日程数据,每次清空div里的数据再加载数据,导致切换日期时,数据展示div有闪动,于是采用动画来进行过渡,这样就巧妙地避免了闪动

前端动画必知必会:React 和 Vue 都在用的 FLIP 思想实战

拿到了这个需求,第一直觉是怎么做?假设第一行第一个图片移动到了第二行第三列,是不是要计算出第一行的高度,再计算出第二行前两个元素的宽度,然后从初始的坐标点通过 CSS 或者一些动画 API 移动过去?

vue 项目如何使用animate.css

页面使用类名(animated )需要和引入的名称相同,bounceInLeft是需要的动画效果,如果完成前三部还是没有效果,可能就是animate.css版本的问题了,直接安装的都是最新版本,而vue官网引入的是3.5.1版本。更换一下版本:

彻底掌握css动画【transition】

说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3

用JavaScript 实现酷炫的粒子追踪动画

你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力,而同时又在后台加载一些数据呢?幸运的是,没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程

使用CSS实现图片帧动画与曲线运动

在前端开发中,提到动画,我们可以:直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。所有动画的基本原理都是:在短时间内连续依次展示对应的图片

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!