CSS 动画总结

Posted go4it

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 动画总结相关的知识,希望对你有一定的参考价值。

CSS 动画
一、使用 animation 和 @keyframes
二、使用 transition 属性
 
/**
 * css3 动画 
 * 使用 @keyframes规则与 animation 
 * @keyframes规则用于创建动画,在 @keyframes中规定某项 css样式,就能创建由当前样式逐渐改为新样式的动画
 * 若在某个时间点有多个动画指定同一属性行为,则在最后出现并应用的动画将覆盖其他动画。
 * Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
 */

// 属性                           描述
// @keyframes                    用于规定动画。    
// 如: @keyframes myAnimationName { code... }

// animation                    所有动画属性的简写属性,除了 animation-play-state 属性。    
// 如: animation: name duration timing-function delay iteration-count direction;

// animation-name                规定 @keyframes 动画的名称。    
// 如: animation-name: myAnimationName

// animation-duration            规定动画完成一个周期所花费的秒或毫秒。默认是 0。    
// 如: animation-duration: 2s/2000ms

// animation-timing-function    规定动画的速度曲线。默认是 "ease"。    
// 如: animation-timing-function: cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1) cubic-bezier 函数详情: https://www.w3.org/TR/css-easing-1/#typedef-timing-function

// animation-delay              规定动画何时开始。默认是 0。    
// 如: animation-delay: 2s/2000ms/-2s/-2000ms 使用负值动画会马上开始,但会跳过对应的 s/ms 数

// animation-iteration-count    规定动画被播放的次数。默认是 1。    
// 如: animation-iteration-count: n/infinite(无数次播放)

// animation-direction          规定动画是否在下一周期逆向地播放。默认是 "normal"。    
// 如: animation-direction: alternate(动画在奇数次数正常播放,如 1、3、5...,在偶数次数反向播放,如 2、4、6...)

// animation-play-state          规定动画是否正在运行或暂停。默认是 "running"。    
// 如: animation-play-state: paused(如利用该属性通过 js代码在动画播放过程中暂停动画)

// animation-fill-mode          规定对象动画时间之外的状态。默认 none
// 如: animation-fill-mode: forwards(动画完成是,保持最后一个属性,即停在最后一个关键帧)/backwards(定义在 animation-delay时间内要用到的属性,即第一个关键帧)/both(应用 forwards和 backwards)

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css animation</title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
    }
    .block{
      position: relative;
      width: 80px;
      height: 50px;      
      background-color: forestgreen;
      border-radius: 10%;
      animation-name: myAnimation;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;

      text-align: center;
      font-size: 20px;
      color: white;
    }
    @keyframes myAnimation{
      0%{
        left: 0;
      }
      25%{
        left: 15%;
        transform: rotate(20deg);
      }
      50%{
        transform: rotate(0deg);
        left: 30%;
      }
      90%{
        transform: rotate(360deg);
        left: 6%;
      }
      95%{
        transform: scale(1.5);
        left: 3%;
      }
      100%{        
        transform: scale(1);
        left: 0px;
      }
    }
  </style>
</head>
<body>
  <div class="block">hello world</div>
</body>
</html>

示例结果:

技术分享图片

 

/**
 * 使用 transition 属性
 */ 

// 值                            描述
// transition-property          规定设置过渡效果的 CSS 属性的名称。默认 all(所有属性获得过渡效果)
// 如: transition-property: width,property2,...propertyN|none(没有属性会获得过渡效果)

// transition-duration          规定完成过渡效果需要多少秒或毫秒。默认 0s(意味着不会有任何效果)
// 如: transition-duration: 2s/2000ms

// transition-timing-function    规定速度效果的速度曲线。默认 ease
// 如: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1)

// transition-delay              定义过渡效果何时开始。默认 0s
// 如: transition-delay: 2s/2000ms

 

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css transition</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }
    .test {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      transition-property: width, background-color;
      transition-duration: 2s;
      transition-timing-function: ease-in-out;
    }

    .test:hover {
      width: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

示例结果:

技术分享图片

 

以上是关于CSS 动画总结的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段7——CSS动画

Tailwind.css 体验总结

Tailwind.css 体验总结

jQuery 将 div 切片成动画片段

CSS 动画总结

css3动画总结