精华内容
参与话题
问答
  • webkit-animation css3 动画

    2014-05-15 16:44:00
    -webkit-animation:仍旧是一个复合属性, -webkit-animation: name duration timing-function delay iteration_count direction; 包括以下几个属性 (1) -webkit-animation-name 这个属性的使用必须...
    -webkit-animation:仍旧是一个复合属性,

    -webkit-animation: name duration timing-function delay iteration_count direction;

    包括以下几个属性

    (1)  -webkit-animation-name    这个属性的使用必须结合@-webkit-keyframes一起使用

    eg:  @-webkit-keyframes fontchange{

    0%{font-size:10px;}

    30%{font-size:15px;}

    100%{font-siez:12px;}

    }

    百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大

    div{ -webkit-animation-name:fontchange;}

    (2)-webkit-animation-duration   表示动画持续的时间

    (3)-webkit-animation-timing-function  表示动画使用的时间曲线

    【语法】: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

    (4)-webkit-animation-delay    表示开始动画之前的延时

    【语法】 -webkit-animation-delay: delay_time;

    (5)-webkit-animation-iteration-count  表示动画要重复几次

    【语法】-webkit-animation-iteration-count: times_number;

    (6) -webkit-animation-direction   表示动画的方向

    【语法】-webkit-animation-direction: normal(默认)  | alternate

    normal  方向始终向前

    alternate 当重复次数为偶数时方向向前,奇数时方向相反

    【另外】跟animation有关的其他属性

    (1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both  设置动画开始之前和结束之后的行为(测试结

    果不是很清晰)

    (2)-webkit-animation-play-state: running(默认) | paused  设置动画的运行状态

    综合案例:

    @-webkit-keyframes fontbulger {
    0% {
    font-size: 10px;
    }
    30% {
    font-size: 15px;
    }
    100% {
    font-size: 12px;
    }
    }

    #box {
    -webkit-animation-name:  fontbulger;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count:3;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s;
    }

    <div id=”box”>文字变化</div>
    展开全文
  • Animation.css动画效果属性

    千次阅读 2020-01-06 17:17:24
    Animation.css动画效果属性安装使用写法规则animation.css支持的动画种类支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)使用示例 安装 npm install animate.css --save 或者 yarn add ...

    安装

    npm install animate.css --save 或者 yarn add animate.css 或者直接下载
    

    使用

    <head>
      <link rel="stylesheet" href="animate.min.css">
    </head>
    或者
    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    </head>
    

    写法规则

    class样式里面animated是一定要有的,后面时animation.css提供的动画效果种类(例如infinite),同时也支持自定义的样式(例如yourElement)。
    

    如:

    <h1 class="animated infinite yourElement">Example</h1>
    

    animation.css支持的动画种类

    在这里插入图片描述

    支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)

    在这里插入图片描述
    如果想要设置其他的延时和加速效果,请在自己的代码中进行设置。

    使用示例

    attention seekers

    (1)bounce 弹跳:

    <h1 class="animated bounce delay-2s"> test animation css</h1>
    

    (2)flash闪烁:

    <h1 class="animated flash delay-2s"> test animation css</h1>
    

    (3)pulse脉搏跳动:

    <h1 class="animated pulse delay-2s"> test animation css</h1>
    

    (4)rubberBand橡皮筋:

    <h1 class="animated rubberBand delay-2s"> test animation css</h1>
    

    (5)shake摇动:

    <h1 class="animated shake delay-2s"> test animation css</h1>
    

    (6)swing摇摆:

    <h1 class="animated swing delay-2s"> test animation css</h1>
    

    (7)tada:

    <h1 class="animated tada delay-2s"> test animation css</h1>
    

    (8)wobble晃动:

    <h1 class="animated wobble delay-2s"> test animation css</h1>
    

    (9)jello果冻:

    <h1 class="animated jello delay-2s"> test animation css</h1>
    

    bouncing entrances 登场

    (1)bounceIn 弹跳进入(从左):

    <h1 class="animated bounceIn delay-2s"> test animation css</h1>
    

    (2)bounceInDown弹跳从上进入:

    <h1 class="animated bounceInDown delay-2s"> test animation css</h1>
    

    (3)bounceInLeft弹跳从左进入:

    <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>
    

    (4)bounceInRight弹跳从右进入:

    <h1 class="animated bounceInRight delay-2s"> test animation css</h1>
    

    (5)bounceInUp弹跳从下进入:

    <h1 class="animated bounceInUp delay-2s"> test animation css</h1>
    

    bouncing exits 退场

    (1)bounceOut 弹跳退出:

    <h1 class="animated bounceOut delay-2s"> test animation css</h1>
    

    (2)bounceOutDown弹跳从下退出:

    <h1 class="animated bounceOutDown delay-2s"> test animation css</h1>
    

    (3)bounceOutLeft弹跳从左退出:

    <h1 class="animated bounceInLeft delay-2s"> test animation css</h1>
    

    (4)bounceOutRight弹跳从右退出:

    <h1 class="animated bounceOutRight delay-2s"> test animation css</h1>
    

    (5)bounceOutUp弹跳从上退出:

    <h1 class="animated bounceOutUp delay-2s"> test animation css</h1>
    

    fading entrances 减弱进入

    (1)fadeIn淡入:

    <h1 class="animated fadeIn delay-2s"> test animation css</h1>
    

    (2)fadeInDown 从上往下淡入:

    <h1 class="animated fadeInDown delay-2s"> test animation css</h1>
    

    (3)fadeInDownBig 从上往下变大淡入:

    <h1 class="animated fadeInDownBig delay-2s"> test animation css</h1>
    

    (4)fadeInLegt从左往右淡入:

    <h1 class="animated fadeInLegt delay-2s"> test animation css</h1>
    

    (5)fadeInLegtBig从左往右变大淡入:

    <h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1>
    

    (6)fadeInRight从右往左淡入:

    <h1 class="animated fadeInRight delay-2s"> test animation css</h1>
    

    (7)fadeInRightBig从右往左变大淡入:

    <h1 class="animated fadeInRightBig delay-2s"> test animation css</h1>
    

    (8)fadeInUp从下往上淡入:

    <h1 class="animated fadeInUp delay-2s"> test animation css</h1>
    

    (9)fadeInUpBig从下往上变大淡入:

    <h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>
    

    fading exits 减弱退出

    (1)fadeOut淡出:

    <h1 class="animated fadeOut delay-2s"> test animation css</h1>
    

    (2)fadeOutDown 从上往下淡出:

    <h1 class="animated fadeOutDown delay-2s"> test animation css</h1>
    

    (3)fadeOutDownBig 从上往下变大淡出:

    <h1 class="animated fadeOutDownBig delay-2s"> test animation css</h1>
    

    (4)fadeOutLegt从右往左淡出:

    <h1 class="animated fadeOutLegt delay-2s"> test animation css</h1>
    

    (5)fadeOutLeftBig从右往左变大淡出:

    <h1 class="animated fadeOutLeftBig delay-2s"> test animation css</h1>
    

    (6)fadeOutRight从左往右淡出:

    <h1 class="animated fadeOutRight delay-2s"> test animation css</h1>
    

    (7)fadeOutRightBig从左往右变大淡出:

    <h1 class="animated fadeOutRightBig delay-2s"> test animation css</h1>
    

    (8)fadeOutUp从下往上淡出:

    <h1 class="animated fadeOutUp delay-2s"> test animation css</h1>
    

    (9)fadeOutUpBig从下往上变大淡出:

    <h1 class="animated fadeOutUpBig delay-2s"> test animation css</h1>
    

    flipper突然的效果

    (1)flip反转轻弹

    <h1 class="animated flip delay-2s"> test animation css</h1>
    

    (2)flipInX在x轴反转进入

    <h1 class="animated flipInX delay-2s"> test animation css</h1>
    

    (3)flipInY在y轴反转进入

    <h1 class="animated flipInY delay-2s"> test animation css</h1>
    

    (4)flipOutX在x轴反转退出

    <h1 class="animated flipOutX delay-2s"> test animation css</h1>
    

    (5)flipOutY在y轴反转退出

    <h1 class="animated flipOutY delay-2s"> test animation css</h1>
    

    light speed 非常快速的效果

    (1)lightSpeedIn 非常快速的进入

    <h1 class="animated lightSpeedIn delay-2s"> test animation css</h1>
    

    (2)lightSpeedOut 非常快速的进入

    <h1 class="animated lightSpeedOut delay-2s"> test animation css</h1>
    

    rotating entrances 旋转进入

    (1)rotateIn旋转进入

    <h1 class="animated rotateIn delay-2s"> test animation css</h1>
    

    (2)rotateInDownLeft旋转从左落下

    <h1 class="animated rotateInDownLeft delay-2s"> test animation css</h1>
    

    (3)rotateInDownRight旋转从右落下

    <h1 class="animated rotateInDownRight delay-2s"> test animation css</h1>
    

    (4)rotateInUpLeft旋转从左升起

    <h1 class="animated rotateInUpLeft delay-2s"> test animation css</h1>
    

    (5)rotateInUpRight旋转从右升起

    <h1 class="animated rotateInUpRight delay-2s"> test animation css</h1>
    

    sliding entrances 滑动进入

    (1)slideInUp上升滑动进入

    <h1 class="animated slideInUp delay-2s"> test animation css</h1>
    

    (2)slideInDown下降滑动进入

    <h1 class="animated slideInDown delay-2s"> test animation css</h1>
    

    (3)slideInRight从右滑入

    <h1 class="animated slideInRight delay-2s"> test animation css</h1>
    

    (4)slideInLeft从左滑入

    <h1 class="animated slideInLeft delay-2s"> test animation css</h1>
    

    sliding exits 滑动退出

    (1)slideOutUp上升滑动退出

    <h1 class="animated slideOutUp delay-2s"> test animation css</h1>
    

    (2)slideOutDown下降滑动退出

    <h1 class="animated slideOutDown delay-2s"> test animation css</h1>
    

    (3)slideOutRight从右滑退出

    <h1 class="animated slideOutRight delay-2s"> test animation css</h1>
    

    (4)slideOutLeft从左滑退出

    <h1 class="animated slideOutLeft delay-2s"> test animation css</h1>
    

    zoom entrances z轴方向进入

    (1)zoomIn z轴方向进入

    <h1 class="animated zoomIn delay-2s"> test animation css</h1>
    

    (2)zoomInDown z轴方向下降进入

    <h1 class="animated zoomInDown delay-2s"> test animation css</h1>
    

    (3)zoomInLeft z轴方向从左进入

    <h1 class="animated zoomInLeft delay-2s"> test animation css</h1>
    

    (4)zoomInRight z轴方向从右进入

    <h1 class="animated zoomInRight delay-2s"> test animation css</h1>
    

    zoom exits z轴方向退出

    (1)zoomOut z轴方向退出

    <h1 class="animated zoomOut delay-2s"> test animation css</h1>
    

    (2)zoomOutDown z轴方向下降退出

    <h1 class="animated zoomOutDown delay-2s"> test animation css</h1>
    

    (3)zoomOutLeft z轴方向从左退出

    <h1 class="animated zoomOutLeft delay-2s"> test animation css</h1>
    

    (4)zoomOutRight z轴方向从右退出

    <h1 class="animated zoomOutRight delay-2s"> test animation css</h1>
    

    special 特别的

    (1)hinge 铰链效果

    <h1 class="animated hinge delay-2s"> test animation css</h1>
    

    (2)jackInTheBox

    <h1 class="animated jackInTheBox delay-2s"> test animation css</h1>
    

    (3)rollIn 翻滚进入

    <h1 class="animated rollIn delay-2s"> test animation css</h1>
    

    (4)rollOut翻滚退出

    <h1 class="animated rollOut delay-2s"> test animation css</h1>
    
    展开全文
  • CSS动画animation

    2018-08-07 21:40:34
    CSS Animations 是CSS的...CSS动画功能是非常强大的,并且效率也比较高,如果能用CSS解决的动画那么我们最好不用JS动画来完成。 CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个...

    CSS Animations 是CSS的一个模块,它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制。CSS动画功能是非常强大的,并且效率也比较高,如果能用CSS解决的动画那么我们最好不用JS动画来完成。

    CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧

    1.创建动画序列

               animation属性或其子属性配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现;

      animation的子属性有:

    • animation-delay: 延时,取值ms/s;
    • animation-direction  
    1.     -normal :默认值,循环结束重置到起点再次开始
    2.     -alternate:交替反向运行
    3.     -reverse:结束后反向运行
    4.     -alternate-reverse:反向交替
    • animation-duration:完成一次完整的动画所用的时间,默认0s,取值ms/s
    • animation-iteration-count:迭代次数,取值:
    1.     -infinite无限
    2.     -数字
    • animation-name:指定keyframes定义的动画帧,可以为多个值,不同值使用逗号分隔
    • animation-play-state:动画运行或暂停
    1. running
    2. paused
    • animation-timing-function:动画运动函数
    1. ease
    2. liner
    3. ease-in
    4. ease-out
    5. ease-in-out
    • animation-fill-mode:控制元素在动画执行前与动画完成后的样式
    1. none
    2. forward
    3. backwards
    4. both
    • animation:速写

     

    展开全文
  • CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲...

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;我们一起学习完了TransformTransition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码(像我这种不懂js的人来说是件很高兴的事了),只是有一点不足之处,我们运用Animation能创建自己想要的一些动画效果,但是有点粗糙,如果想要制作比较好的动画,我见意大家还是使用flash或js等。虽然说Animation制作出来的动画简单粗糙,但我想还是不能减少我们大家对其学习的热情。

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:

    Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。

    Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下:

     keyframes-rule'@keyframes' IDENT '{' keyframes-blocks '}';

     keyframes-blocks[ keyframe-selectors block ]* ;

     keyframe-selectors[ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

     

    我把上面的语法综合起来

      @keyframes IDENT {

         from {

           Properties:Properties value;

         }

         Percentage {

           Properties:Properties value;

         }

         to {

           Properties:Properties value;

         }

       }

       或者全部写成百分比的形式:

       @keyframes IDENT {

          0% {

             Properties:Properties value;

          }

          Percentage {

             Properties:Properties value;

          }

          100% {

             Properties:Properties value;

          }

        }

     

     

    其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀,据说Firefox5可以支持css3的 animation动画属性。

    我们来看一个W3C官网的实例

      @-webkit-keyframes 'wobble' {

         0% {

            margin-left100px;

            background: green;

         }

         40% {

            margin-left150px;

            background: orange;

         }

         60% {

            margin-left75px;

            background: blue;

         }

         100% {

            margin-left100px;

            background: red;

         }

      }

            

     

    这里我们定义了一个叫“wobble”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间,那么他每一段执行的状态如下图所示:

    Keyframes定义好了以后,我们需要怎么去调用刚才定义好的动画“wobble”

    CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

    下面我们来看看怎么给一个元素调用animation属性

      .demo1 {

         width50px;

         height50px;

         margin-left100px;

         background: blue;

         -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/

         -webkit-animation-duration10s;/*动画持续时间*/

         -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

         -webkit-animation-delay2s;/*动画延迟时间*/

         -webkit-animation-iteration-count10;/*定义循环资料,infinite为无限次*/

         -webkit-animation-direction: alternate;/*定义动画方式*/

      }

     

    CSS Animation动画效果将会影响元素相对应的css值,在整个动画过程中,元素的变化属性值完全是由animation来控制,动画后面的会覆盖前面的属性值。如上面例子:因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距,其默认值是:margin-left:100px;background: blue;但当我们在执行动画0%时,margin-left:100px,background:green;当执行到40%时,属性变成了:margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时:margin-left:100px;background: red;此时动画将完成,那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果,只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样,最后出现的权根是最大的。当动画结束后,样式回到默认效果。

    我们可以看一张来自w3c官网有关于css3的animation对属性变化的过程示意图

    从上面的Demo中我们可以看出animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我们分别来看看这几个属性的使用

    一、animation-name:

    语法:

      animation-namenone | IDENT[,none | IDENT]*;

     

    取值说明:

    animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

    二、animation-duration:

    语法:

      animation-duration: <time>[,<time>]*

     

    取值说明:

    animation-duration是用来指定元素播放动画所持续的时间长,取值:<time>为数值,单位为s (秒.)其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。

    三、animation-timing-function:

    语法:

       animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 

     

    取值说明:

    animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。

    四、animation-delay:

    语法:

      animation-delay: <time>[,<time>]*

     

    取值说明:

    animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。

    五、animation-iteration-count

    语法:

      animation-iteration-count:infinite | <number> [, infinite | <number>]* 

     

    取值说明:

    animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。

    六、animation-direction

    语法:

      animation-directionnormal | alternate [, normal | alternate]* 

    取值说明:

    animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

    七、animation-play-state

    语法:

       animation-play-state:running | paused [, running | paused]* 

     

    取值说明:

    animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

    上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:

      animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

     

    如下图所示

    兼容的浏览器

    前面我也简单的提过,CSS3的animation到目前为止只支持webkit内核的浏览器,因为最早提出这个属性的就是safari公司,据说Firefox5.0+将支持Animation。如图所示

    那么到此为止,我们主要一起学习了有关animation的理论知识,下面我们一起来看两个实例制作过程,来加强对animation的实践能力

    DEMO一:发光变色的button

    我们这个demo主要是通过在keyframes中改变元素的background;color;box-shadow三个属性,来达到一种发光变色的button效果,我们来看看其实现代码

    HTML Code:

      <a href="" class="btn">发光的button</a>

     

    CSS Code

      /*给这个按钮创建一个动名名称:buttonLight,然后在每个时间段设置不同的background,color来达到变色效果,改变box-shadow来达到发光效果*/

      @-webkit-keyframes 'buttonLight' {

         from {

           background: rgba(9620327,0.5);

           -webkit-box-shadow0 0 5px rgba(2552552550.3) inset, 0 0 3px rgba(2201202000.5);

           color: red;

         }

         25% {

           background: rgba(19620327,0.8);

           -webkit-box-shadow0 0 10px rgba(2551552550.5) inset, 0 0 8px rgba(1201202000.8);

           color: blue;

        }

        50% {

          background: rgba(196203127,1);

          -webkit-box-shadow0 0 5px rgba(1552552550.3) inset, 0 0 3px rgba(2201201001);

          color: orange;

        }

        75% {

          background: rgba(19620327,0.8);

          -webkit-box-shadow0 0 10px rgba(2551552550.5) inset, 0 0 8px rgba(1201202000.8); 

          color: black;

        }

       to {

         background: rgba(9620327,0.5);

         -webkit-box-shadow0 0 5px rgba(2552552550.3) inset, 0 0 3px rgba(2201202000.5);

         color: green;

        }

      }

      a.btn {

        /*按钮的基本属性*/

        background#60cb1b;

        font-size16px;

        padding10px 15px;

        color#fff;

        text-align: center;

        text-decoration: none;

        font-weight: bold;

        text-shadow0 -1px 1px rgba(0,0,0,0.3);

        -moz-border-radius5px;

        -webkit-border-radius5px;

        border-radius5px;

        -moz-box-shadow0 0 5px rgba(2552552550.6) inset, 0 0 3px rgba(2201202000.8);

        -webkit-box-shadow0 0 5px rgba(2552552550.6) inset, 0 0 3px rgba(2201202000.8);

        box-shadow0 0 5px rgba(2552552550.6) inset, 0 0 3px rgba(2201202000.8);

        /*调用animation属性,从而让按钮在载入页面时就具有动画效果*/

        -webkit-animation-name"buttonLight"/*动画名称,需要跟@keyframes定义的名称一致*/

        -webkit-animation-duration5s;/*动画持续的时间长*/

        -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/

      }

     

    效果:

    效果一变化中效果二

    为了更好的看出这个demo的效果,你可以把上面的代码复制到你本过的页面上,并使用safari和chrome,你会觉得很有意思,整个按钮好像在不停的呼吸一样。

    Demo二:方形旋转变成圆型

    我们这个demo是通过transform的rotate和border-radius不同值,把一个方型图片随着时间的推移,慢慢的转换成了个圆型效果,下面我们来看看其具体实现的效果

    HTML Code:

       <a href="#" class="box"></a>

       <span class="click-btn">Click</span>

     

    CSS Code:

      /*定义方型转化为圆型的动画round*/

      @-webkit-keyframes 'round' {

         from{

           -webkit-transform: rotate(36deg);

           -webkit-border-radius2px;

         }

      10%{

          -webkit-transform: rotate(72deg);

          -webkit-border-radius4px;

         }

      20% {

          -webkit-transform: rotate(108deg);

          -webkit-border-radius6px;

        }

      30% {

          -webkit-transform: rotate(144deg);

          -webkit-border-radius9px;

        }

      40%{

         -webkit-transform: rotate(180deg);

         -webkit-border-radius12px;

      }

      50%{

         -webkit-transform: rotate(216deg);

         -webkit-border-radius14px;

      }

      60% {

         -webkit-transform: rotate(252deg);

         -webkit-border-radius16px;

      }

      70% {

         -webkit-transform: rotate(288deg);

         -webkit-border-radius19px;

      }

      80%{

         -webkit-transform: rotate(324deg);

         -webkit-border-radius22px;

      }

      to {

         -webkit-transform: rotate(360deg);

         -webkit-border-radius25px;

      }

    }

       /*给方型box一个初步样式*/

       a.box {

          display: block;

          width50px;

          height50px;

          background: red;

          margin-bottom20px;

       }

       /*圆型box的样式,并在这里应用animation*/

       a.round {

          -webkit-border-radius25px;

          -moz-border-radius25px;

          border-radius25px;

          background: green;

          -webkit-animation-name'round'/*动画名称*/

          -webkit-animation-duration60s;/*播放一次所持续时间*/

          -webkit-animation-timing-function: ease;/*动画播放频率*/

          -webkit-animation-iteration-count: infinite;/*动画播放次涒为无限次*/

        }

               

       /*click button效果*/

       .click-btn {

           background: rgba(125,220,80,0.8);

           -moz-border-radius5px;

          -webkit-border-radius5px;

           border-radius5px;

           -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);

           -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);

           box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);

           padding5px 10px;

           color#369;

           font-size16px;

           font-weight: bold;

           text-align: center;

           text-shadow0 -1px 0 rgba(0,0,0,0.5);

           cursor: pointer;

       }

     

    jQuery Code:

      <script type="text/javascript">

          $(document).ready(function(){

             $(".click-btn").click(function(){

                 $(this).siblings().addClass("round");

              });

           });

      </script>

     

    我们载入时box是没有任何动画效果的,当我们点击了click button看给原box上加上一个round的class名,从而触发了一个round的动作。请看效果:

    未点击按钮时效果(未触发动画效果)点击click按钮开始播放动画

    我们这里简单的介绍了两个demo的应用,其实大家可以发挥自己的想像制作出更好更多的动画效果,如果你对animation制作动画很感兴趣,你可以参考这几个网站:webdesignersblogslodiveimpressivewebs这上面有许多特别有意的动画demo。

    那么到此有关于CSS3的animation相关应用就介绍完了。希望能给一些朋友带来一点帮助,如果各位有更好的建议,可以通过首页的QQ或email等方式直接跟我联系。还是那句话,感兴趣的朋友请观注本站关于css3的内容更新,我将不断的整理css3相关方面的知识,和大家一起学习,一起探讨。下面列出本站关于CSS3的相关链接,以方便大家阅读:

    第一节:《CSS3 Gradient

    第二节:《CSS3 RGBA

    第三节:《CSS3 Border-radius

    第四节:《CSS3 Text-shadow

    第五节:《CSS3 Box-shadow

    第六节:《CSS3 Transform

    上一节:《CSS3 Transition

    如需转载烦请注明出处:W3CPLUS

     

    展开全文
  • vue加animation.css动画

    2020-07-07 15:30:35
    在想要加动画的元素上加上类,animate__animated 是基础类必须加,后面的是动画样式类,可以选择很多,具体参考animation.css官网 <h1 class="animate__animated animate__bounce">An animated element</h1...
  • 近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 ...同时分享一个自己录制的CSS3动画特效经典案例【推荐教程】--后期会更新vue框架 微信小程序等内容。 https://ke.qq.com/cou...
  • -webkit-animation动画,CSS动画的使用

    千次阅读 2019-07-05 11:18:24
    web加载动画,CSS动画 今天由于工作需要,在Git上面拿到一个微信小程序,导入后随便点点,他的loading动画吸引到我了。根据源码,搭配blog,w3c,一点一点学习怎么设计的这个loading。 1.效果图 四周小方块不停的...
  • CSS3 animationCSS3 帧动画

    千次阅读 2013-12-14 12:06:47
    以前浏览器中的DOM动画都是通过js来实现的,现在css3提供了动画功能,即animation,下面是一个进度条的例子来说明如何使用。
  • css动画animation

    2017-07-09 15:15:05
    我们使用animation属性及其子属性对需要应用动画的元素进行设定,但是实际的展现形式将在@keyframe中定义子属性 animation-name:动画名称(在@keyframes时使用) animation-duration:完整动画的周期 a
  • CSS动画-animation

    2020-09-11 19:02:19
    定义和用法: 动画可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 定义动画规则: ...animation动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; animati
  • css3 animation动画

    2017-09-06 15:04:01
    <!DOCTYPE html> <title>css3 animation动画 .box{ height:100px; width:100px;
  • css animation动画使用

    2020-08-20 16:13:38
    分享推荐(配色网址): ... animation语法(简写): ...animation-name:动画名字。 animation-duration:动画执行的总时间。 animation-timing-function:动画运动曲线。 animation-delay:开始的
  • CSS3 动画 animation属性

    千次阅读 2018-02-23 22:08:27
    动画@keyframes只是用来...动画与元素关联后,在整个动画过程中,元素的样式将完全由 animation属性来控制,关键帧中后面的样式,会覆盖前面的样式。CSS3动画,就是通过样式的不断变化得以实现的。CSS3动画的基本原...
  • animation动画)、transition(过渡)、transform(变形)、translate(移动) CSS3中的transform(变形)属性用于内联元素和块级元素,可以旋转、扭曲、缩放、移动元素,它的属性值有以下五个:旋转rotate、扭曲...
  • 以一个小球为例 向右匀速运动200px 然后再移动回来,然后再移动到200px处 停在那里 效果如下 div{ width:40px; height:40px;... animation:move 2s linear 3 alternate both; } @keyframes ...
  • css3动画属性--animation动画

    千次阅读 2015-03-27 11:03:12
    CSS3中的animation与HTML5中的Canvas绘制动画又不同,animation只应用在页面上已存在的DOM元素上。 运用animation能创建自己想要的一些动画效果,但是有点粗糙。 了解animation之前得知道"Keyframes",我们把他叫做...
  • 腾讯动画在线制作库 http://isux.tencent.com/css3/index.html?transition-property css3 keyframe#animation{ -webkit-animation:rotateInDownLeft 1s .2s ease both; -moz-animation:rotateInDownLeft 1s .2s ...
  • CSSanimation动画)过渡,动画

    千次阅读 2018-08-15 09:22:45
    HTML代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&... type="
  • 文章原址: ...css 动画 阮一峰 笔记: 一、Transition(过渡): 作用:在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。  tr
  • css动画-animation各个属性详解

    万次阅读 多人点赞 2016-09-19 18:12:16
    css3的animation很容易就能实现各种比价酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题。 一、动画属性: 动画属性包括:①animation...
  • CSS3 Animation 动画

    2016-04-14 15:21:37
    CSS3 Animation 动画 @keyframes 其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{...
  • css3 animation动画

    2020-06-07 01:16:29
    animation <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a> @keyframes more{ from { transform: translateY(-30px); } to { transform: translateY(0px...
  • 文章较长,头绪较乱,请在无聊时PC端浏览。...言归正传,昨天结束了书本的最后一张,css动画,在demo的实现过程中发现了很多有趣的css动画相关的知识点,于是现在也算是对css动画的一个总结。 写在前面 本文借
  • CSS3animation动画 + 动画如何切换

    千次阅读 2016-03-06 15:37:10
    之前做转盘的时候,用的就是animation,然后加@keyframes。... CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,实现复杂的动画效果。 属性: animation-name:指定@keyframes关键帧的名字
  • 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解 我们知道CSS3的Animation有八个属性 animation-...
  • jQuery Animation实现CSS3动画

    千次阅读 2013-08-13 22:34:43
    CSS3好多效果因为它的值不是数值的,所以是没有办法直接通过jQuery animate()方法实现动画的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一个特点就是它们的值是...
  • cssanimation动画)属性1.animation: name duration timing-function delay iteration-count direction fill-mode play-state(所有属性集合)2.animation-name属性值:绑定动画名(@keyframes名)3.animation-...
  • 我们知道CSS3的Animation有八个属性 animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode animation-timing-...

空空如也

1 2 3 4 5 ... 20
收藏数 64,741
精华内容 25,896
关键字:

animation