কম্পিউটার টিউটোরিয়াল

CSS3-এ keyframes ব্যবহার করে বামে অ্যানিমেশন সরানো


CSS3-এ keyframes ব্যবহার করে বামে অ্যানিমেশন সরাতে নিচের কোডটি চালান:

উদাহরণ

<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>এটি অতিরিক্ত keyframe দিয়ে টেক্সট পরিবর্তন করার বামে অ্যানিমেশনের একটি উদাহরণ।</p>
    <button onclick="myFunction()">পৃষ্ঠা রিলোড করুন</button>
    <script>
      function myFunction() {
        location.reload();
      }
    </script>
  </body>

  1. CSS দিয়ে অ্যানিমেশনের শেষে ধীর গতি সেট করুন

  2. CSS দিয়ে অ্যানিমেশনের শুরুতে ধীর গতি সেট করুন

  3. CSS3 Box-Sizing ব্যবহার করে লেআউট তৈরি করার পদ্ধতি

  4. CSS3 Keyframes (কীফ্রেম) ডিফাইন করা