菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
29
0

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

原创
05/13 14:22
阅读数 752

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)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

发表评论

0/200
29 点赞
0 评论
收藏
为你推荐 换一批