码迷,mamicode.com
首页 > Web开发 > 详细

css3动画属性-animation

时间:2020-03-01 23:20:11      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:http   move   article   eps   ade   anim   https   margin   次数   

一:动画属性参数的详解

  简介

    CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

  语法

    <‘ animation-name ‘>:检索或设置对象所应用的动画名称
    <‘ animation-duration ‘>:检索或设置对象动画的持续时间
    <‘ animation-timing-function ‘>:检索或设置对象动画的过渡类型
    <‘ animation-delay ‘>:检索或设置对象动画延迟的时间
    <‘ animation-iteration-count ‘>:检索或设置对象动画的循环次数
    <‘ animation-direction ‘>:检索或设置对象动画在循环中是否反向运动
    <‘ animation-fill-mode ‘>:检索或设置对象动画时间之外的状态
    <‘ animation-play-state ‘>:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

  animation

    所有动画属性的简写属性,除了 animation-play-state 属性

  animation-name

    规定 @keyframes 动画的名称。就是@keyframes后面跟着的动画名称。

  animation-duration

    规定动画完成一个周期所花费的秒或毫秒。默认是 0。

  animation-timing-function

    规定动画的速度曲线。默认是 "ease"。

    常见的动画速度参数:

    1. linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0

    2. ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

    3. ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

    4. ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

    5. ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

    6. step-start:等同于 steps(1, start)

    7. step-end:等同于 steps(1, end)

    8. steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

    9. cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

  animation-delay

     规定动画何时开始。默认是 0。也即是指动画延时执行时间。

  animation-iteration-count

     规定动画被播放的次数。默认是 1。当然,我们可以设置2次,3次,依次递推。还有个无线循环关键字infinite,也即是反复循环播放动画。

  animation-direction

    规定动画是否在下一周期逆向地播放。默认是 "normal"。当然还有下列值:

    1. reverse:反方向运行

    2. alternate:动画先正常运行再反方向运行,并持续交替运行

    3. alternate-reverse:动画先反运行再正方向运行,并持续交替运行

  animation-fill-mode

    规定对象动画时间之外的状态。

    1. none:默认值。不设置对象动画之外的状态

    2. forwards:设置对象状态为动画结束时的状态

    3. backwards:设置对象状态为动画开始时的状态

    4. both:设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧;动画完成之后是"to"或"100%"关键帧状态。

  animation-play-state

    规定动画是否正在运行或暂停。默认是 "running"。还有个值paused:暂停。

二:实例

动画实例一

 1 h2{
 2             width:100px;
 3             height:100px;
 4             background:blue;
 5             position:absolute;
 6             left:0;top:0;
 7             /* 用animation 调用关键帧 */
 8             animation:h2Move 3s infinite;
 9         }
10 
11         .box:hover h2{
12             /* 鼠标滑过动画暂定 */
13             animation-play-state:paused;
14         }
15 
16         /* 制定关键帧 */
17         @keyframes h2Move{
18             0%{
19                 left:0;top:0;
20             }
21             25%{
22                 left:700px;top:0;
23             }
24             50%{
25                 left:700px;top:400px;
26             }
27             75%{
28                 left:0;top:400px;
29             }
30             100%{
31                 left:0;top:0;
32             }

动画实例二:

  结合animation与transform的结合(旋转3D立方体效果)

.box{
            width:300px;
            height:300px;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            transform-style: preserve-3d;
            transform:rotateX(20deg) rotateY(30deg);
            transition:2s;
            animation: boxMove 5s linear infinite;
        }
        @keyframes boxMove{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }

源码地址  https://pan.baidu.com/s/1gnM7VjFgyM1ZU1agPXFKjQ  提取码:zhqp

css3动画属性-animation

标签:http   move   article   eps   ade   anim   https   margin   次数   

原文地址:https://www.cnblogs.com/007-cj/p/12392880.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!