精华内容
下载资源
问答
  • css3动画animation属性大全

    万次阅读 多人点赞 2018-02-28 11:48:47
    animation属性语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;例:animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性...

    animation属性

    语法:

    animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    例:animation: myanimation 2s linear 1s infinite forwards;

    animation 属性是一个简写属性,用于设置动画属性:

    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state

    • animation-name    动画名称
    • animation-duration   动画指定需要多少秒或毫秒完成
      值:time      默认值为 0,意味着没有动画效果
    • animation-timing-function   设置动画如何完成一个周期
      值:linear  匀速
             ease   先慢后快,结束前变慢     默认
             ease-in    低速开始
             ease-out  低速结束
             ease-in-out   低速开始和结束
             cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
    • animation-delay   动画在启动前的延迟间隔
      值:time   默认值为 0
    • animation-iteration-count    动画的播放次数
      值:n   一个数字,定义播放多少次动画     默认值1
             infinite    动画无限次播放
    • animation-direction    是否轮流反向播放动画
      值:normal         正常
             reverse        反向播放
             alternate      在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放
             alternate-reverse   在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放
    • animation-fill-mode    当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要处于什么状态
      值:none   默认,播放完动画后,画面停在起始位置
            forwards     播放完动画,停在animation定义的最后一帧(保持最后一个属性值)
             backwards   如果设置了animation-delay,在开始到delay这段时间,画面停在第一帧。如果没有设置delay,画面是元素设置的初始值
             both   设置动画状态为动画结束或开始的状态(例如设置奇数播放为forwards状态,偶数播放为backwards状态
    • animation-play-state    动画是否正在运行或已暂停
      值:paused   指定暂停动画
             running   指定正在运行的动画,默认
    • initial    设置属性为其默认值
    • inherit   从父元素继承属性

    展开全文
  • 动画Animation 常用属性

    2019-06-19 09:19:00
    动画就是由一个个的关键帧组成的。 想实现一个动画的效果,这个时候 ... @keyframes cc { /* 动画序列:时间节点 */ /* 开始状态 */ /* 节点设置 */ /* 写CSS属性 */ from { transform: translateX(0px); } /* ...

    动画就是由一个个的关键帧组成的。

    想实现一个动画的效果,这个时候

    1.需要先预设一个动画

    @keyframes cc {
    /* 动画序列:时间节点 */
    /* 开始状态 */
    /* 节点设置 */
    /* 写CSS属性 */
    from {
    transform: translateX(0px);
    }
    /* 结束状态 */
    to {
    transform: translateX(500px);
    }
    /* ************************************百分数 */
    0% {
    /* 节点设置 */
    /* 写CSS属性 */
    transform: translateX(0px);
    }
    50% {
    transform: translateX(800px);
    }
    100% {
    /* 注意点:节点状态一定是在上一个节点状态上进行 */
    transform: translateX(800px) translateY(600px);
    }
    }

    百分比指的是动画耗时(animation-duration)的时间比

    2.设置动画属性

    先来一个综合写法

    animation: name duration timing-function delay iteration-count direction fill-mode;
    

     其中两个必要的属性就是

    1.animation-name:cc;           你用@keyframe设置的动画的名字

    2.anmation-duration:3s;      动画耗时

    3.animation timing-function :运动速度

             默认属性ease(低速开始,加快,低速结束) linear(匀速运动) ease-in(低速开始)

              ease-out(低速 结束 )ease-in-out 低速开始和结束    steps(n)动画分成n步来完成   

              效果图      http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function 

    4.animation-delay :2s; 延迟时间   

    5.animation-interation-count:2/infinite(无限次)  动画响应的次数(interation英文意思相互影响)

    6.animation-direction:     循环方向   

                默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/

                alternate-reverse(100~0~100)

    7.animation-fill-mode      动画等待或者结束时候的状态     

            forwards 初始状态不能立即执行0%的状态,执行动画完成后保留最后状态

            backwards 如在0%时候设置样式,立即执行。动画完成后不会保留最后的结果(有延迟)

            both  既能立即执行设置的样式,也会保留最后的结果。

    8.animation-play-state   (不在简写内) 播放和暂停状态    paused暂停     running 播放

     

    3.组动画  ,让几个动画同时执行                

      animation: name_1 5s linear,name_2 2s linear     两个动画之间用逗号隔开

    转载于:https://www.cnblogs.com/qdxbls/p/11049443.html

    展开全文
  • css动画-animation各个属性详解

    万次阅读 多人点赞 2019-08-15 10:59:34
    css动画-animation各个属性详解一、动画属性1、animation-name:指定要绑定到选择器的关键帧的名称。2、animation-duration:定义动画完成一个周期需要多少秒或毫秒3、animation-timing-function:指定动画将如何...

    原文链接:https://blog.csdn.net/aSuncat/article/details/52588078

    css3的 animation 很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题。
     
     

    一、动画属性

    动画属性包括:
    ①animation-name
    ②animation-duration
    ③animation-timing-function
    ④animation-delay
    ⑤animation-iteration-count
    ⑥animation-direction
    ⑦animation-fill-mode
    ⑧animation-play-state
     
    属性详解

    1、animation-name:指定要绑定到选择器的关键帧的名称。

    2、animation-duration:定义动画完成一个周期需要多少秒或毫秒

    3、animation-timing-function:指定动画将如何完成一个周期。

    说明
    linear动画从头到尾的速度是相同的。
    ease默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in动画以低速开始。
    ease-out动画以低速结束。
    ease-in-out动画以低速开始和结束。
    cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
    step-start在变化过程中,都是以下一帧的显示效果来填充间隔动画
    step-end在变化过程中,都是以上一帧的显示效果来填充间隔动画
    steps()可传入两个参数,第一个是大于0的整数,将动画等分成指定数目的小间隔动画,根据第二个参数来决定显示效果。第二个参数设置后和step-start,step-end同义,在分成的小间隔动画中判断显示效果。

    关于cubic-bezier(n,n,n,n):

    1. cubic-bezier(n,n,n,n)称为三次贝塞尔曲线,速度曲线。
    2. cubic-bezier(n,n,n,n) 曲线定制
    3. 小球落地又弹起demo
      我不知道这个cubic-bezier曲线是怎么算出来的,难道是要靠自己试出来的嘛,不知道有没有人知道怎么算出来的。???

    演示demo(4个方块背景颜色变化)
    demo解析:
    ①step-start:20%(background: green;)到60%(background: blue;)之间,显示的是60%的效果(background: blue;)
    ②step-end:与step-start相反,20%(background: green;)到60%(background: blue;)之间,显示的是20%的效果(background: green;)
    ③steps(1, start) 等于step-start,steps(1,end)等于step-end
    ④steps函数的工作机制:
    steps函数的工作机制

    4、animation-delay:定义动画什么时候开始。

    属性解析:

    1. 单位可以是秒(s)或毫秒(ms)。
    2. 单位可以是负值,-2s表示动画立马开始,但跳过 2 秒进入动画,即前2秒的动画不执行,直接跳过前2秒进入动画。

    演示DEMO:

    1. 类似音波的加载效果demo
      demo解析:
      ①设置同样的动画,通过animation为负值来实现不同时间段的线条的长度。
      在这里插入图片描述
      ②效果示意:
      一次动画1.2s,分解为12个阶段,每个阶段0.1秒。每个阶段的第3秒线拉长。
      line1是从0进入动画。
      line2是跳过前11个阶段,即直接从11进入动画。
      依次类推…
      ③写5个div时,连着写,然后自己设置margin,一方面避免代码压缩后各线条之间没有空隙,另一方面避免自己不知道5根线的总宽度。
    2. 京东全民寻宝demo
      demo解析:
      ①如果没有steps(8),图片会从第一行字直接跳到最后一行,中间的6行不会出现。

    5、animation-iteration-count :定义动画应该播放多少次。

    说明
    n一个数字,定义应该播放多少次动画
    infinite指定动画应该播放无限次(永远)

    6、animation-direction:定义是否循环交替反向播放动画。

    说明
    normal默认值。动画按正常播放。
    reverse动画反向播放。
    alternate动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
    alternate-reverse动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
    initial设置该属性为它的默认值。
    inherit从父元素继承该属性。

    6.1 如果动画被设置为只播放一次,该属性将不起作用。
    6.2 动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性可以重写该行为。
     

    7、animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

    说明
    none默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
    forwards在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
    backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。
    both动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
    initial设置该属性为它的默认值。
    inherit从父元素继承该属性。

    解析:

    1. 默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
    2. forwads表示让动画停留在结束状态,即停留在最后一帧。
    3. backwords:
      当 animation-direction 为 “normal” 或 “alternate” 时,回到第一帧。
      当 animation-direction 为 “reverse” 或 “alternate-reverse” 时,停留在最后一帧。
       

    8、animation-play-state:指定动画是否正在运行或已暂停。

    说明
    paused指定暂停动画。
    running指定正在运行的动画。

    8.1 在JavaScript中使用此属性在一个周期中暂停动画。
    8.2 线条鼠标悬停开始 动画demo
     
     

    二、动画相关

    1、animation的简写(即上述属性的介绍顺序)

    animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    

    具体化可以记成一下形式:

    animation:myAnim 1s linear 1s infinite alternate both running;
    

     

    2、keyframes:定义动画规则,关键帧。

    说明
    animationname必需的。定义animation的名称。
    keyframes-selector必需的。动画持续时间的百分比。
    css-styles必需的。一个或多个合法的CSS样式属性

    具体格式:

    1. 指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。以下两段代码效果相同。
    @keyframes myAnim{
      from { background: #f00; }
      50% { background: #0f0; }
      to { background: yellowgreen; }
    }
    
    @keyframes myAnim{
      0% { background: #f00; }
      50% { background: #0f0; }
      100% { background: yellowgreen; }
    }
    
    1. 如果省略某个状态,浏览器会自动推算中间状态。但是,为了获得最佳的浏览器支持,应该始终定义0%和100%的选择器。
    @keyframes rainbow {
      50% { background: orange }
      to { background: yellowgreen }
    }
    
    @keyframes rainbow {
      to { background: yellowgreen }
    }
    
    1. 可以将多个状态写在一行。
    @keyframes myAnim{
      0%,100% { background: #f00; }
      50% { background: #0f0; 
    }
    

     

    3、浏览器前缀

    IE 10和Firefox(>= 16)支持没有前缀的animation,firefox(<16)使用-moz-前缀,因为现在firefox的版本也都不低,所以firefox都直接使用没有前缀的animation。
    而chrome,safari,opera不支持,所以必须使用webkit前缀。

    使用示例如下:

    div{
    	animation:myAnim 1s;
    	-webkit-animation:myAnim 1s;
    }
    
    @keyframes myAnim{
      0% { background: #f00; }
      50% { background: #0f0; }
      100% { background: yellowgreen; }
    }
    
    @-webkit-keyframes myAnim{
      0% { background: #f00; }
      50% { background: #0f0; }
      100% { background: yellowgreen; }
    }
    

    4、定义动画时,必须定义动画的名称和动画的持续时间。如果省略持续时间,动画将无法运行,因为默认值是0。

    展开全文
  • 最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉,常常容易搞混。所以从网站研究了点资料,总结一下,方便需要的朋友们可以参考学习。
  • 主要为大家详细介绍了CSS3中Animation动画属性用法,教大家如何使用animation动画,感兴趣的小伙伴们可以参考一下
  • CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成: 1)通过类似Flash动画中的帧来声明一个动画; 2)在animation...
  • View Animation相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且一定的局限性。比如:你希望View一个颜色的切换动画;你希望可以使用3D旋转动画;你希望当动画停止时,View的位置就是当前的...
  • CSS3 动画 animation属性

    千次阅读 2018-02-23 22:08:27
    动画@keyframes只是用来...动画与元素关联后,在整个动画过程中,元素的样式将完全由 animation属性来控制,关键帧中后面的样式,会覆盖前面的样式。CSS3动画,就是通过样式的不断变化得以实现的。CSS3动画的基本原...

    @keyframes只是用来声明一个动画,而动画本身并不执行任何操作。因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来。

    如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画效果。动画与元素关联后,在整个动画过程中,元素的样式将完全由 animation属性来控制,关键帧中后面的样式,会覆盖前面的样式。CSS3动画,就是通过样式的不断变化得以实现的。CSS3动画的基本原理如图 8‑17 所示:

    CSS动画原理图8-17 CSS动画原理

    在CSS3中,使用 animation属性来实现动画与元素的关联,并由 animation 相关的属性来控制动画的整个播放过程。其语法格式为:

    
    
    1. animation:[animation-name] ||
    2. [animation-duration] ||
    3. [animation-timing-function] ||
    4. [animation-iteration-count] ||
    5. [animation-direction] ||
    6. [animation-play-state] ||
    7. [animation-delay] ||
    8. [animation-fill-mode]

    也就是说,animation 是一个复合属性,可分解为 animation-name、animation-duration、animation-timing-function、animation-iteration-count、animation-direction、animation-play-state、animation-delay、animation-fill-mode 这 8 个独立的属性,下面分别进行介绍。

    animation-name

    animation-name属性指定所要关联的动画名称,其作用是让元素调用由@keyframes所定义的动画。如果省略该属性,则使用默认值 none,将没有任何动画效果。

    一个元素可以关联一个或多个动画名称,如果关联多个动画,就需要指定多个动画名称,中间以逗号进行分隔。如:

    
    
    1. .demo {
    2.     animation-namewobble
    3. }

    上述代码就表示,将@keyframes wobble所定义的动画与 class="demo" 的元素相关联,该元素将调用名称为 wobble 的动画。

    animation-duration

    animation-duration属性规定动画从开始到结束所持续的时间,默认值为 0s。接受秒或毫秒的值。如果省略该属性,则定义的 animation -* 属性均无效,不会产生动画效果。

    animation-timing-function

    animation-timing-function属性指定动画期间速度如何变化,与 transition-timing-function 属性的取值相同,请参阅。

    animation-iteration-count

    animation-iteration-count属性指定动画的迭代次数,取值为 infinite | <number>,默认值为 1。动画单向遍历一次关键帧的过程,称作一次迭代。

    一般情况下,一个动画会有两个状态:默认状态和迭代状态。页面初始加载完成后,元素进入迭代之前的状态,称作默认状态;而元素进入迭代之后的状态,被称作迭代状态。

    当取值为 0 时,不发生迭代;当取值为 1 时,仅发生一次迭代;当取值大于 1 时,发生多次迭代;当取值为 infinite 时,会发生无穷次迭代。

    注意:

    animation-iteration-count属性取值为 0 与没有动画完全不同。当属性设置为 0 时,动画依然有效,也会被播放,只是元素从默认状态进入到迭代状态后,发现迭代次数为 0,动画会停止在迭代开始时的状态而已。没有动画时,元素始终保持在默认状态,不会进入迭代状态。

    animation-direction

    animation-direction属性定义在某些迭代或所有迭代中的播放方向。可选值有 normal | reverse | alternate | alternate-reverse,默认值为 normal。当 animation-iteration-count属性设置为 1 时,alternate 和 alternate-reverse 为无效值。

    1) normal 表示正向播放,即每个迭代都正向播放。正向播放从关键帧的 from 开始,到 to 结束。如图 8‑18 所示:

    animation-direction:normal效果图8-18 animation-direction:normal效果

    2) reverse 表示逆向播放,即每个迭代都逆向播放。逆向播放从关键帧的 to 开始,到 from 结束。如图 8‑19 所示:

    animation-direction:reverse效果图8-19 animation-direction:reverse效果

    3) alternate 表示正向交替播放,即以正向播放开始,首尾相接,循环播放。其结果是第 n 次迭代正向播放,第 n+1 次迭代逆向播放(n 从 1 开始)。如图 8‑20 所示:

    animation-direction:alternate效果图8-20 animation-direction:alternate效果

    4) alternate-reverse 表示逆向交替播放,即以逆向播放开始,首尾相接,循环播放。其结果是第 n 次迭代逆向播放,第 n+1 次迭代正向播放。如图 8‑21 所示:

    animation-direction:alternate-reverse效果图8-21 animation-direction:alternate-reverse效果

    animation-play-state

    animation-play-state属性用来控制动画的播放状态,取值 running 或 paused,默认值为 running。

    可以通过paused将正在播放的动画暂停下来,也可以通过 running 让暂停的动画从暂停的位置重新播放。

    animation-delay

    animation-delay属性定义在动画开始之前的等待时间,默认值为 0s,表示不需要等待。接受秒或毫秒的值。如果不需要等待,可以省略该属性。

    animation-fill-mode

    animation-fill-mode属性定义动画在处于执行之外的时间期间,即动画播放结束后、或被延迟播放期间,元素所应用的样式。可选值有 none | forwards | backwards | both,默认值为 none。不同取值的含义见表 8‑2:

    表 8-2 animation-fill-mode属性取值及含义
    属性值含义
    none始终应用默认样式,即页面初始加载完成后,还未进入迭代前的样式
    backwards表示后退,即后退到动画第一个迭代开始时的样式。被延迟的动画,延迟期间应用第一个迭代开始时的样式。播放方向为normal或alternate的动画,应用from帧的状态(若未定义from帧,则应用默认样式);播放方向为reverse或alternate-reverse的动画,应用to帧的样式
    forwards表示前进,即前进到动画结束时的样式。被延迟的动画,延迟期间应用默认状态的样式;被播放的动画,播放结束后,应用结束状态的样式。正向播放时,应用from帧的样式(若未定义from帧,则为默认样式);逆向播放时,应用to帧的样式
    both同时遵循forwards和backwards的规则,在两个方向上扩展动画属性。即动画开始之前,应用backwards规则;动画结束之后,应用forwards规则

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • jquery css3 animation属性多个页面切换动画 jquery css3 animation属性多个页面切换动画
  • css3弹力球动画animation属性制作3D弹力球弹跳动画效果
  • 纯css3 animation属性制作旋转文字动画切换效果
  • CSS3中动画animation的几个属性

    千次阅读 2018-08-29 10:18:26
    animation-iteration-count:infinite|&lt;number&gt; 默认一次 infinite:表示不限次数,循环迭代。...animation-play-state属性主要用来控制元素动画的播放状态。其主要两个值:running(默认值...
  • 纯css3 animation动画属性点击loading加载动画提示框效果代码
  • Android动画 实现开关按钮动画属性动画之平移动画),最近做项目,根据项目需求,一个这样的功能,实现类似开关的动画效果,经过自己琢磨及上网查找资料,终于解决了,这里就记录下:  在Android里面,一些炫酷...
  • 纯css3 animation动画属性点击loading加载动画 纯css3 animation动画属性点击loading加载动画
  • css3动画animation 特点:不需要事件触发,调用“关键帧”即可。 关键帧:计算机动画术语, 帧——就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记...
  • 主要介绍了CSS3中的Transition过度与Animation动画属性使用要点Transition和Animation能被用来制作基本的页面图片动态效果,当然进一步的控制还是需要JavaScript的帮助,需要的朋友可以参考下
  • 最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 注意: export 方法每次调用后会清掉之前的动画操作 动画队列 调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用...
  • animation动画属性

    千次阅读 2019-10-14 15:36:41
    animation属性 animation常用的六个属性 animation: 1.定义@keyframes名称。 2.规定完成动画所花费的时间,以秒或毫秒计。 3.规定动画的速度曲线。(不常用)。 4.规定在动画开始之前的延迟。(延迟只执行一次。如果...
  • 属性动画的简单方法
  • 主要介绍了Android中编写属性动画PropertyAnimation的进阶实例,包括一些缩放和淡入淡出效果的设计,强大且不算复杂,需要的朋友可以参考下
  • 博客示例代码:http://blog.csdn.net/xiaohao0724/article/details/54863112
  • 全栈工程师开发手册 (作者:栾鹏) 安卓教程全解 安卓动画全解:补间动画(视图动画)、属性动画 补间动画(视图动画) ...补间view动画(改变外观,不改变属性):窗口间切换、...Animation属性 JAVA方法
  • 主要介绍了CSS3与动画有关的属性transition、animation、transform对比,通过浏览器兼容性,用法和对比更深刻的展示了彼此之间的异同,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • animation-name 动画名称,可以多个值,用逗号隔开,表示绑定了多个动画 animation-name属性动画指定一个名称 animation-name兼容主流的浏览器,不过还是需要加前缀去兼容 animation-name两个属性值,分别是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,895
精华内容 32,758
关键字:

动画的animation属性有哪些