关闭

CSS3动画transform、transition和animation的区别

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

CSS3动画总结

常用特效/变换(transform)scale(2D缩放) rotate(2D旋转) translate(2D位移)skew(2D倾斜);keyframes这个属性用来定义一系列关键帧

css @keyframes属性 语法

@keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画。作用:通过 @keyframes 规则,您能够创建动画。

CSS3 动画的实现

什么是CSS3动画?在CSS中,动画是一种让元素逐渐改变样式的效果。 您可以使用@keyframes关键字创建动画,后跟动画的名称。要使动画跨浏览器兼容,您需要使用供应商前缀:

Flutter 动画

Flutter动画中有4个比较重要的角色:Animation、Controller、Curve、Tween,先来了解一下这四个角色;Animation是Flutter动画库中的核心类,用于插入指导动画的值

设计师10大必备HTML动画工具

HTML 5已经成为Web开发者当中最流行的语言之一,“健壮的”语言有很大的生产优质万维网内容的能力。HTML 5在近三年的增长迅猛,新引入HTML 5的技术更加的优秀。HTML 5技术被现代浏览器所支持

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

JS动画与CSS动画

JS动画优点:过程控制能力强。可以对动画工程进行精准的控制,暂停、取消、开始、终止都可以。动画效果多、炫酷。有一些效果是CSS动画所不能实现的

CSS中过渡与动画的区别有哪些?

过度是在动画基础上增加的,作用是如何实施动画,比如一个div从一个地方到另一个地方,设置时长,是匀速前进,或者从快到慢等,这种就是过渡。

css3 动画的暂停和重新开始

CSS3的animation直接提供一个 animation-play-state 属性规定动画正在运行还是暂停 。写动画样式的时候特别注意下不同浏览器的兼容性,加上对应的前缀 :

点击更多...

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