CSS3动画transform、transition和animation的区别

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

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

css3动画添加间隔

因项目需要,需要在元素上实现动画效果,并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。在网上找了很多方法,最终的方法基本都是改动画规则

js触发css动画,可以重复触发

写好动画,但不在需要动画的元素上绑定animation属性,事件触发的时候绑上,事件结束后再删除掉,下次点击就能重新绑上,重现动画效果;CSS代码:写好动画效果(闪烁)

CSS3实现简易牛顿摆动画

最近在练习CSS3的关键帧动画(keyframes),于是做了一个简单的牛顿摆(听名字可能陌生,但你一定见过它),实现起来并不复杂,只需对最左和最右的小球进行关键帧动画处理,同时注意应该将绳子与小球作为一个整体

CSS3动画:animation

可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张;1.animation-name对象的动画名称,以便后续设置动画属性时使用默认为none

CSS波纹动画

以上就是css波纹动画的代码和效果图。想要看具体的效果可以复制代码浏览,当然啦,也可以设置属于自己的漂亮的背景颜色和链接。

css3支持动画吗?

CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面。

10个常用的CSS动画库

Animista是一个在线动画生成器,同时也是一个动画库,它为我们提供了以下功能,我们可以选择想要的动画类型(例如entrance/exist),除了可以选择某个动画(例如,scale-in)外

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

WEB 动画的一些实现方式

WEB 的动画实现多种多样,随着H5 的发展,实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现:GIF动画、FLASH动画 / SilverLight、Javascript + HTML、SMIL、APNG、Javascript + SVG、Video、Javascript + Canvas、CSS3 transition/animation

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

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

点击更多...

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