zoukankan      html  css  js  c++  java
  • CSS3中transition和animation区别的理解

    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等事件配合使用,需要由事件来触发过渡

    我们知道 transition 虽然简单好用,但是我们会发现它受到各种限制。

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

    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负责动画效果,如:

    animation属性类似于transition,他们都是随着时间改变元素的属性值,
    其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;
    animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果
    1)动画不需要事件触发,过渡需要。
    2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

  • 相关阅读:
    又搬回来了233
    2017.10.2解题报告
    2017.10.1解题报告
    Android 百度地图开发(二)--- 定位功能之MyLocationOverlay,PopupOverlay的使用
    Last_IO_Errno: 1236 Last_IO_Error: Got fatal error 1236 from master when reading data from binary lo
    [Warning] Aborted connection 11203 to db: 'ide' user: 'nuc' host: 'prd01.mb.com' (Got an error writi
    浅析地方门户网优化的方法
    xxx==null和xxx.equals(null)的区别
    Java+7入门经典
    《UNIX环境高级编程》笔记--read函数,write函数,lseek函数
  • 原文地址:https://www.cnblogs.com/liliuyu/p/13827816.html
Copyright © 2011-2022 走看看