آموزش animation در CSS3

در این آموزش قصد داریم در صفحه خود انیمیشن ایجاد کرده و تغییراتی در نمایش رنگ های یک المان ایجاد کنیم.

برای شروع مثال زیر را در نظر بگیرید.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <div id="main">
    <div>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
    </div>

  </div>
</body>
</html>

#main{
  background-color: purple;
  text-align: right;
  direction: rtl;
  border-radius: 30px;
  height: 80px;
  color: white;
  padding: 20px;
}

animation در css

میتوانید با استفاده از انیمشین تغییراتی را در رنگ به وجود آورید.

برای تعریف انیمیشن به مثال زیر دقت کنید. کار با انیمیشن را با دستور keyframes شروع میکنیم و یک نام دلخواه برای آن قرار میدهیم. پس از آن از دستور from-to استفاده میکنیم که مشخص کنیم رنگ ما از چه رنگ به چه رنگی تغییر کند.

سپس کافیست در جای مورد نظر نام انیمیشن را فراخوانی کرده و یک زمان مشخص را اختصاص دهید.

@keyframes test1{
  from {background-color: aqua;}
  to {background-color: yellow;}
}

#main{
  background-color: purple;
  text-align: right;
  direction: rtl;
  border-radius: 30px;
  height: 80px;
  padding: 20px;
  animation-name: test1;
  animation-duration: 5s;
}

و همچنین میتوانید تعداد تغییرات را تعریف کنید با دستور:

animation-iteration-count: 2;

با دستور زیر میتوانید این حلقه تکرار را بی نهایت کنید.

animation-iteration-count: infinite;

برای تعریف انیمیشن میتوانید از مدلی دیگری هم استفاده کنید.

@keyframes test2{
  ۰% {background-color: aqua; color: purple;}
  ۲۵% {background-color: yellow; color: red;}
  ۵۰% {background-color: white; color: black;}
  ۱۰۰% {background-color: aqua; color: purple;}
}

#main{
  background-color: purple;
  text-align: right;
  direction: rtl;
  border-radius: 30px;
  height: 80px;
  padding: 20px;
  animation-name: test2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

این دستور به صورت درصدی از شما مقدار میگیرد. در این مثال من علاوه بر رنگ پس زمینه، دستور تغییر رنگ متن را هم دادم.

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

قسمت قبل آموزش (آموزش transition در CSS3)

Post Views: 287