CSS3基础知识核心动画（二）

时间 2019-12-12

标签 css3 css 基础知识核心动画栏目 CSS 繁體版

原文原文链接

Transition过渡

transition-property 过渡属性 all|[attr]
transition-duration 过渡时间
transition-delay 延迟时间
transition-timing-function 运动类型html

ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）贝塞尔曲线

webkit内核下：
ele.addEventListener('webkitTransitionEnd',function(){},false);
标准浏览器下:
ele.addEventListener(‘transitionend',function(){},false)
transition 执行次数问题web

2D变换

transform浏览器

rotate() 旋转函数缓存

deg 度数
Transform-origin 旋转的基点

skew() 倾斜函数函数

skewX()
skewY()

scale() 缩放函数默认值是1动画

scaleX()
scaleY()

translate() 位移函数3d

translateX()
translateY()

animation声明关键帧动画

关键帧---@keyframescode

相似于flash
定义动画在每一个阶段的样式，即帧动画
关键帧的时间单位
数字：0%、25%、100%等（设置某个时间段内的任意时间点的样式）
字符：from（0%）、to（100%）
格式

@keyframes 动画名称
    {
         动画状态
    }

animation调用动画

必要属性

animation-name 动画名称（关键帧名称）
animation-duration 动画执行时间
可选属性
animation-timing-function
linear 匀速
ease 缓存
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

可选属性

animation-delay 动画延迟
animation-iteration-count 重复次数
animation-direction 动画运行的方向 normal | reverse | alternate | alternate-reverse
animation-play-state 动画状态 running | paused
animation-fill-mode 动画结束后的状态 none | forwards| backwards | both

3D变换

transform-style : flat | preserve-3d (3D空间展现)orm

perspective 透视效果
transform:perspective(800px) 直接做用在子元素上
perspective-origin 透视点位置
transform 新增函数htm

translate3d( tx , ty, tz )
translateX() translateY() translateZ()
rotate3d( rx , ry , rz，a)
rotateX() rotateY() rotateZ()
scale3d( sx , sy , sz)
scaleX() scaleY() scaleZ()

动画进阶

【timing-function  steps (<number_of_steps>，`<direction>`)】

steps()是一个timing function，容许咱们将动画或者过渡分割成段，而不是从一种状态持续到另外一种状态的过渡。这个函数有两个参数;

第一个参数是一个正值，指定咱们但愿动画分割的段数;
第二个参数定义了这个要点在咱们的@keyframes中申明的动做将会发生的关键,这个值是可选的，在没有传递参数时，默认为”end”;

【”start”】表示一个左--持续函数，在动画开始时，动画的第一段将会立刻完成。以左侧端点为起点，当即跳到第一个step的结尾处。它会当即跳到第一段的结束而且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画；

【”end”】表示一个右--持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。每一个选择本质上从一个不一样的面移动这个元素而且将产生一个不一样的位置在这个相同的动画里；

【Sprites 精灵动画】

原理：使用一张含有多帧静态画面的图片，经过切换 background-position 使其变为连续的动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box1 {
        width: 100px;
        height: 100px;
        line-height:100px;
        text-align: center;
        margin:20px 0;
        font-size:20px;
        color:#fff;
        -webkit-animation: animation1 6s steps(3, start) infinite;
    }
    .box2 {
        width: 100px;
        height: 100px;
        line-height:100px;
        text-align: center;
        margin:20px 0;
        font-size:20px;
        color:#fff;
        -webkit-animation: animation2 6s steps(3, end) infinite;
    }
    @-webkit-keyframes animation1{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @keyframes animation1{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @-webkit-keyframes animation2{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
    @keyframes animation2{
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }
</style>
<body>
<div class="box1">start</div>
<div class="box2">end</div>
</body>
</html>