Day 28: CSS Animation, CSS Transition Animation Box size




------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->
  <title>Your Webpage Title</title>
</head>
<body>
  <div class="grad"></div> <!-- Your HTML element with the "grad" class -->
</body>
</html>


@keyframes example {
  0% { background-color: red; left: 0px; top: 0px; }
  25% { background-color: yellow; left: 200px; top: 0px; }
  50% { background-color: blue; left: 200px; top: 200px; }
  75% { background-color: green; left: 0px; top: 200px; }
  100% { background-color: red; left: 0px; top: 0px; }
}

.grad {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

-----------------------------------------------------------------------------------------------------------------------------

Animation Box Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->

  <title>Your Webpage Title</title>

</head>

<body>

  <div class="animated-box"></div>

</body>

</html>

CSS
:root {
  --animation-duration: 4s; /* Animation duration */
  --box-height: 100px; /* Initial height of the box */
  --box-color-1: #3498db; /* Initial color */
  --box-color-2: #e74c3c; /* Color during animation */
}

@keyframes moveAndChangeColor {
  0%, 100% {
    width: var(--box-height);
    background-color: var(--box-color-1);
    top: 0;
  }

  50% {
    width: calc(var(--box-height) * 2);
    background-color: var(--box-color-2);
    top: calc(100vh - var(--box-height));
  }
}

.animated-box {
  width: var(--box-height);
  height: var(--box-height);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--box-color-1);
  animation: moveAndChangeColor var(--animation-duration) ease-in-out infinite;
}

-----------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    @keyframes exampleAnimation {

      0% {

        transform: scale(1);

        background-color: red;

      }

      50% {

        transform: scale(1.2);

        background-color: yellow;

      }

      100% {

        transform: scale(1);

        background-color: red;

      }

    }

    .animated-element {

      width: 100px;

      height: 100px;

      background-color: red;

      animation: exampleAnimation 3s infinite; /* Animation name, duration, and iteration count */

    }

  </style>

  <title>CSS Animation Example</title>

</head>

<body>

  <div class="animated-element"></div>

</body>

</html>


Comments

Post a Comment

Popular posts from this blog

else-if condition in if-else statements: Concatenation in JavaScript :

Image
  else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
Read more

Day 9: CSS - Font Formate

Image
p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
Read more