HTML动画及过渡效果

HTML动画及过渡效果

1.动画

1) 动画定义
  1. @keyframes 动画名称{

    from {

    }

    to{

    }

    }

=》

  1. @keyframes 动画名称{

    10% {

    }

    20%{

    }

    100%{

    }

    }

    2) 动画应用
  • animation-name:动画名称;

  • animation-duration: 动画持续时间

    5s;

  • animation-delay: 动画的延迟

    1s

  • animation-direction 动画运动方向

    reverse

    alternate

  • animation-fill-mode: 动画结束后保留哪个样式

    forwards 保留最后一帧的样式

    backwards 保留第一帧的样式

  • animation-iteration-count: 动画执行的次数

    4

    infinite

  • animation-timing-function: 动画执行的时间曲线

    linear

    steps

  • animation-play-state: ; 动画播放状态

    running

    paused

    animation:

  • 速写形式

  • animation: 4s linear 0s infinite alternate move_eye

    3) 第三方动画库(animate.css)
  • 封装了css3的通用的动画样式,专业

  • https://daneden.github.io/animate.css/

    引入动画库

    为元素添加class

    2. 过渡效果

  • transition

  1. transition和animation的区别

    1). transition必须要触发,一般使用:hover

    2). transition不需要设置关键帧

    简单的过渡效果使用transition,复杂的动画使用animation

  2. 用法

  • transition-property 指定过渡的属性

    可以指定一个属性 width

    可以指定多个属性 width,background

    可以指定所有属性 all

  • transition-duration 过渡持续的时间

    可以指定秒,以及毫秒 s /ms

  • transition-timing-function 过渡的时间曲线

  • transition-delay 过渡延迟

    可以指定秒,以及毫秒 s /ms

  • transition 速写

    transition:property duration timing delay;

  • 例如:

    transition: margin-right 2s ease-in-out .5s;

  1. 变形(transform:)
  • scale(2) 变大

  • skewX(45deg) 倾斜

  • skewY(45deg) 倾斜

  • skew(45deg) 倾斜

  • rotate(45deg) 旋转

  • rotateX(45deg) 旋转

  • rotateY(45deg) 旋转

  • rotateZ(45deg) 旋转

  • translateX(200px)

  • translateY(300px)

  • translate(200px,300px)

  • mdn

CSS百度脑图

这次介绍的是动画的页面,东西不是很多,主要就是要记要理解的名字有点多,其余的也没什么了~下一篇写一个简单的动画效果 嘿嘿

HTML动画及过渡效果_第1张图片 HTML动画及过渡效果_第2张图片

你可能感兴趣的