HTML および CSS のアニメーションモジュール-htmlチュートリアル-php.cn

HTML および CSS のアニメーションモジュール

php中世界最好的语言

リリース： 2018-03-13 11:44:08

オリジナル

1950 人が閲覧しました

今回は HTML と CSS のアニメーションモジュールについて説明します。HTML と CSS でアニメーションモジュールを使用する際の注意点は次のとおりです。実際のケースを見てみましょう。 1. アニメーションモジュール

1. トランジションとアニメーションの類似点と相違点

1.1 相違点

アニメーションを実行するにはトランジションを手動でトリガーする必要がある

アニメーションは人間によるトリガーなしで実行可能

1.2 類似点

トランジションとアニメーションが使用される要素にアニメーションを追加します

トランジションとアニメーションは、システムに追加される新しい属性です

アニメーション効果を得るには、トランジションとアニメーションの両方が 3 つの要素を満たす必要があります

2 アニメーションの 3 つの要素

2.1 どのアニメーションを実行する必要があるかをシステムに伝えます

2.2 lnj という名前のアニメーションを自分たちで作成する必要があることをシステムに伝えます

2.3 システムにアニメーションの長さを伝えます

p{             width: 100px;    
 height: 50px;  
 background-color: red;       
 /*1.告诉系统需要执行哪个动画*/   
 animation-name: lnj;       
 /*3.告诉系统动画持续的时长*/             
  animation-duration: 3s;       }        
 /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/  
 @keyframes lnj {            
  from{                 margin-left: 0;           }             
  to{                 margin-left: 500px; }         
  }

ログイン後にコピー

2. アニメーションモジュール - その他の属性 (パート 1)

  p {         
  width: 100px;         
  height: 50px;         
  background-color: red;         
  animation-name: sport;         
  animation-duration: 2s;         
  /*告诉系统多少秒之后开始执行动画*/         
  /*animation-delay: 2s;*/         
  /*告诉系统动画执行的速度*/         
  animation-timing-function: linear;         
  /*告诉系统动画需要执行几次*/         
  animation-iteration-count: 3;  
  //infinite : 无限的         
  /*告诉系统是否需要执行往返动画         
  取值:         normal, 默认的取值, 执行完一次之后回到起点继续执行下一次         
  alternate, 往返动画, 执行完一次之后往回执行下一次         
  */         animation-direction: alternate;     }     
  @keyframes sport {         
  from{             margin-left: 0;         }         
  to{             margin-left: 500px;         }     }     
  p:hover{         
  /*         告诉系统当前动画是否需要暂停         
  取值:         running: 执行动画,默认取值         
  paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;         
  */         
  animation-play-state: paused;     }

ログイン後にコピー

3. アニメーションモジュール - その他の属性 ( 次へ)

      .box2{             
      width: 200px;             
      height: 200px;             
      background-color: blue;             
      margin: 100px auto;             
      animation-name: myRotate;             
      animation-duration: 5s;             
      animation-delay: 2s;             
      /*             通过我们的观察, 动画是有一定的状态的            
       1.等待状态             2.执行状态             3.结束状态             */
      /*             animation-fill-mode作用:             指定动画等待状态和结束状态的样式 
                  取值:             none: 不做任何改变             
                  forwards: 让元素结束状态保持动画最后一帧的样式; 
                  //向前的            
       backwards: 让元素等待状态的时候显示动画第一帧的样式; 
                   // 向后的             
                   both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
      */             
      /*animation-fill-mode: backwards;*/             
      /*animation-fill-mode: forwards;*/             
      animation-fill-mode: both;         }         
      @keyframes myRotate {            
       0%{                 transform: rotate(10deg);             }             
       50%{                 transform: rotate(50deg);             }             
       100%{                 transform: rotate(70deg);             }        
        } 
      animation-fill-mode

ログイン後にコピー

4. アニメーションモジュール - 連続書き込み

1. アニメーションモジュールの連続書き込み形式

アニメーション: アニメーション名アニメーション期間アニメーションの移動速度実行時間往復アニメーション;

2. アニメーションモジュールの連続書き込み形式

アニメーション: アニメーション名アニメーションの長さ;

5. 雲の効果

<html lang="en"> <head>     
<meta charset="UTF-8">     <title>104-动画模块-云层效果</title>     <style>         
*{             margin: 0;             padding: 0;         }         
ul{             height: 400px;             background-color: skyblue;             
margin-top: 100px;             animation: change 5s linear 0s infinite alternate;            
 position: relative;             overflow: hidden; //让屏幕下方的滚动条隐藏掉         }      
    ul li{             list-style: none;             width: 400%;  
    //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
        height: 100%;             position: absolute; 
        // 设置子绝父相后,三个li会重叠到一起             
        left: 0;             top: 0;         }         ul li:nth-child(1){             
        background-image: url("images/cloud_one.png");             
        animation: one 30s linear 0s infinite alternate;         }         
        ul li:nth-child(2){             background-image: url("images/cloud_two.png");             
        animation: two 30s linear 0s infinite alternate;         }         
        ul li:nth-child(3){             background-image: url("images/cloud_three.png");             
        animation: three 30s linear 0s infinite alternate;         }         
        @keyframes change {             
        from{                 background-color: skyblue;             }             
        to{                 background-color: black;             }         }         
        @keyframes one {            
         from{                 margin-left: 0;             }             
         to{                 margin-left: -100%;  
         //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动;             
         }         }         
         @keyframes two {            
          from{                 margin-left: 0;             }             
          to{                 margin-left: -200%;
          //由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
                       }         }         
         @keyframes three {             from{                 margin-left: 0;             }             
         to{                 margin-left: -300%;             }         }     
         </style> </head> <body> <ul>     <li></li>     <li></li>     <li></li> </ul> </body> </html>

ログイン後にコピー

6. 無限スクロール

<html lang="en"> <head>     <meta charset="UTF-8">     <title>105-动画模块-无限滚动</title>     
<style>         *{             margin: 0;             padding: 0;         }        
 p{             width: 600px;             height: 188px;             border: 1px solid #000;           
   margin: 100px auto;             overflow: hidden;         }         ul{             width: 2000px; 
   //这个无限滚动原理就是ul做动画             
   height: 188px;             background-color: black;  
   //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果             
   animation: move 10s linear 0s infinite normal;                      
   //name 时间 速度 延时 无限重复 是否往返(normal代表不往返)
            }         
            ul li{             float: left;             list-style: none;             width: 300px;
                         height: 188px;             background-color: red;             
                         border: 1px solid #000;             box-sizing: border-box;         }
                                  ul:hover{             
                                  /*动画添加给谁, 就让谁停止*/ 
                                              animation-play-state: paused;         } 
                                                      ul:hover li{             opacity: 0.5; 
                                                      //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
                                                               }         
                                                               ul li:hover{             opacity: 1; 
                                                               //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
                                  }         @keyframes move {             
                                  from{                 margin-left: 0;             }             
                                  to{                 margin-left: -1200px;
                                  //只需要移除屏幕4个li的宽度就可.   屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果             
                       }         }     </style> </head> <body> <p>     <ul>         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>        
                       <li>![](images/banner3.jpg)</li>         <li>![](images/banner4.jpg)</li>         
                       //把前两个li加在后面,起到过度效果;动画不会显得太生硬.         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>     
                       </ul> </p> </body> </html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

HTMLとCSSの2D変換モジュール

エンタープライズ開発でH5を使用する場合の注意点は何ですか

以上がHTML および CSS のアニメーションモジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。