CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3を使用してキーフレームで左のアニメーションを移動する

次のコードを実行して、CSS3を使用してキーフレームで左のアニメーションを移動することができます

例

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>This is an example of animation left with an extra keyframe to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>

  1. CSS3を使用したボックスサイズ設定によるレイアウトの作成

    CSS3を使用してボックスサイズのレイアウトを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{    width: 500px;    border:8px solid rgb(35, 0, 100); } .border { &nbs

  2. CSS3でのキーフレームの定義

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3でキーフレームを定義するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 100px; &n