文章目录
  1. 1. transition
    1. 1.1. 状态
    2. 1.2. 参数
  2. 2. 2D 转换(transform)
    1. 2.1. 浏览器支持
  3. 3. 3D 转换
    1. 3.0.0.1. perspective:1000px; // 透视
  • 3.1. 3D 位移
  • 3.2. 3D 旋转
  • 3.3. 3D 缩放
  • 4. 动画
    1. 4.1. 参数
    2. 4.2. 动画执行完成后触发的事件
  • 5. animation.css 使用
    1. 5.0.1. 参考
  • transition

    过渡动画,定义 css 初始样式开始到结束时候中间过度时间段内的动画效果,可称之为补间动画。

    状态

    开始状态(动画放在这个状态里面)
    结束状态(最终形态)

    参数

    • transition-property: 规定对哪个属性进行过度,all 为默认值

    可以指定要进行过渡的 css 属性,如果提供多个属性值,以逗号进行分隔:

    1
    .style {transition-property: opacity, left, top, width;)
    • transition-duration 过渡执行时间
    • transition-timing-function: 动画执行的速度:
    1
    2
    3
    4
    5
    6
    ease(逐渐变慢) 默认值
    linear匀速
    ease-in(加速)
    ease-out(减速)
    ease-in-out(先加速后减速
    cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
    • transition-delay 动画延时执行时间,默认为 0
    1
    2
    3
    4
    5
    6
    div {
    transition-property: width;
    transition-duration: 2s; /*过度时间2秒*/
    transition-timing-function: ease;
    transition-delay: 2s; /*y延时2秒开始过度*/
    }

    为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:

    1
    2
    3
    div {
    transition: width 2s ease 2s;
    }

    如果使用属性的默认值,则可以省略:

    1
    2
    3
    4
    5
    div {
    transition: width 2s;
    /*相当于*/
    /*transition: width 2s ease 0*/
    }

    使用 transtion 属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在 css 中给这个元素定义一个类(:hover 等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

    1
    <div>xiaoyueyue</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    div {
    width: 200px;
    height: 200px;
    background-color: green;
    border-radius: 100px;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-weight: 700;
    transition: width 3s, height 3s, background-color 3s, opacity 3s;
    }

    div:hover {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: red;
    opacity: 0;
    }

    还可以使用自定义类来实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    div {
    width: 200px;
    height: 200px;
    background-color: green;
    border-radius: 100px;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-weight: 700;
    transition: width 3s, height 3s, background-color 3s, opacity 3s;
    }

    div.on {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: red;
    opacity: 0;
    }
    1
    2
    3
    4
    5
    var box = document.querySelector("div");

    box.onmouseenter = function() {
    box.classList.add("on");
    };

    2D 转换(transform)

    浏览器支持

    Internet Explorer 10, Firefox, 和 Opera 支持 transform 属性.

    Chrome 和 Safari 要求前缀 -webkit- 版本.

    注意: Internet Explorer 9 要求前缀 -ms- 版本.

    功能 书写 补充
    1.位移 translate(x,y) 根据左(X 轴)和顶部(Y 轴)位置给定的参数,从当前元素位置移,加单位:如 px
    2.旋转 rotate(30deg) (角度设置正值(顺时针),负值(逆时针))
    3.缩放 scale(倍数) 整数(大于 1)放大 小数(小于 1)缩小, scale(2,3)转变宽度为原来的大小的 2 倍,和其原始大小 3 倍的高度。
    4.倾斜 skew(30deg,45deg) 第一个值垂直方向倾斜,第二个方向代表水平倾斜
    5.旋转原点 transform-origin:left top;(以左上角为旋转原点) 改变旋转原点的位置应该一开始就改变 40px 50px;

    例子,直径为 200 的圆鼠标移入后向右移动 100px 同时颜色渐变为红色:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div {
    width: 200px;
    height: 200px;
    background-color: green;
    border-radius: 100px;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-weight: 700;
    transition: background-color 3s, transform 3s;
    }

    .on {
    transform: translate(100px);
    background: red;
    }

    3D 转换

    perspective:1000px; // 透视

    取值为眼睛距离图片的距离 600-1000px 是人眼最舒服的距离

    设置有两种方式

    1. 给父元素设置

    2. 作为 transform 的属性写进 transform 里面

    transform-style:preserve-3d; // 显示出 3D 效果

    3D 位移

    1. translateX(30px) // 沿着 x 轴移动 30px
    2. translateY(30px) // 沿着 y 轴移动 30px
    3. translateZ(30px) // 沿着 z 轴移动 30px

    3D 旋转

    1. transform-origin:top/bottom/center; // 沿着哪里旋转
    2. transform:rotateX(10deg) // 沿着 x 轴旋转
    3. transform:rotateY(10deg) // 沿着 y 轴旋转
    4. transform:rotateZ(10deg) // 沿着 z 轴旋转

    3D 缩放

    1. transform-origin:top/bottom/center; // 沿着哪里缩放
    2. scaleX(10deg) // 沿着 x 轴缩放
    3. rscaleY(10deg) // 沿着 y 轴缩放
    4. scaleZ(10deg) // 沿着 z 轴缩放

    动画

    当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

    指定至少这两个 CSS3 的动画属性绑定向一个选择器:

    • 规定动画的名称
    • 规定动画的时长

    关键帧的时间单位

    数字:0%、25%、100%等

    字符:from(0%)、to(100%)

    例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    @keyframes myfirst {
    0% {
    background: red;
    left: 0px;
    top: 0px;
    }
    25% {
    background: yellow;
    left: 200px;
    top: 0px;
    }
    50% {
    background: blue;
    left: 200px;
    top: 200px;
    }
    75% {
    background: green;
    left: 0px;
    top: 200px;
    }
    100% {
    background: red;
    left: 0px;
    top: 0px;
    }
    }
    div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    }

    像前面讲的 transition 属性一样,也可以把这些 animation 属性简写到一个 animation 中,使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到 animation 中

    1
    2
    3
    div {
    animation: myfirst 5s;
    }

    参数

    含义 属性名
    动画名称 animation-name
    持续的时间 animation-duration
    执行次数 animation-iteration-count(默认为 1 次,infinite 一直执行)
    延时执行的时间 animation-delay:2s
    执行的速度 animation-timing-function:inear 匀速 ease 缓冲 ease-in 由慢到快 ease-out 由快到慢 ease-in-out 由慢到快再到慢。cubic-bezier(number,number,number,number):特定的贝塞尔曲线类型,4 个数值需在[0, 1]区间内
    动画逆波 animation-direction:alternat 动画时间之外的状态
    动画时间之外的问题 animation-fill-mode:forwords 停止到动画结束的状态 / backwords (默认)
    动画的播放状态 animation-play-state:( running 播放 和 paused 暂停 )
    播放前重置,动画是否重置后再开始播放 animation-direction alternate 动画直接从上一次停止的位置开始执行 normal 动画第二次直接跳到 0%的状态开始执行

    注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀

    动画执行完成后触发的事件

    当 CSS 3 的 transition 动画执行结束时,触发 webkitTransitionEnd 事件,使用:

    1
    dom.addEventListener(‘webkitTransitionEnd’,function(){})

    animation.css 使用

    添加 cdn 引用

    1
    2
    3
    4
    <link
    href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css"
    rel="stylesheet"
    />

    然后你想要哪个元素进行动画,就给那个元素添加上 animated 类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

    给上面的样式添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:

    1
    2
    3
    4
    5
    var box = document.querySelector("div");

    box.onmouseenter = function() {
    box.classList.add("animated", "shake");
    };

    至于动画的效果有差异可自定义样式进行覆盖

    animation.css 提供动画的可用 class 类名

    Class Name
    bounce flash pulse rubberBand
    shake headShake swing tada
    wobble jello bounceIn bounceInDown
    bounceInLeft bounceInRight bounceInUp bounceOut
    bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
    fadeIn fadeInDown fadeInDownBig fadeInLeft
    fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
    fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
    fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
    fadeOutUp fadeOutUpBig flipInX flipInY
    flipOutX flipOutY lightSpeedIn lightSpeedOut
    rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
    rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
    rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
    rollIn rollOut zoomIn zoomInDown
    zoomInLeft zoomInRight zoomInUp zoomOut
    zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
    slideInDown slideInLeft slideInRight slideInUp
    slideOutDown slideOutLeft slideOutRight slideOutUp

    参考

    文章目录
    1. 1. transition
      1. 1.1. 状态
      2. 1.2. 参数
    2. 2. 2D 转换(transform)
      1. 2.1. 浏览器支持
    3. 3. 3D 转换
      1. 3.0.0.1. perspective:1000px; // 透视
  • 3.1. 3D 位移
  • 3.2. 3D 旋转
  • 3.3. 3D 缩放
  • 4. 动画
    1. 4.1. 参数
    2. 4.2. 动画执行完成后触发的事件
  • 5. animation.css 使用
    1. 5.0.1. 参考