HTML动画及过渡效果

HTML动画及过渡效果

1.动画

1) 动画定义

1. @keyframes 动画名称{

   from {

   }

   to{

   }

   }

=》

2. @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;

3. 变形(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百度脑图

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