74 – Animation – KeyFrames, Name, Duration

Learn CSS In Arabic 2021

ال Code الموجود في الدرس

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS</title>
    <link rel="stylesheet" href="css/master.css" />
  </head>
  <body>
    <div>Animation</div>
  </body>
</html>

/*
  Animation
  - KeyFrames
  - Name
  - Duration
*/

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transform: translate(-50%, -50%);
  animation-name: change-color;
  animation-duration: 2s;
}
/* Code One */
@keyframes change-color {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}
/* Code Two */
@keyframes change-color {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
/* Code Three */
@keyframes change-color {
  0% {
    background-color: red;
  }
  5% {
    background-color: blue;
  }
  80% {
    background-color: black;
  }
  100% {
    background-color: red;
  }
}

ال Code الموجود في الدرس

روابط

التسجيل

سوشيال