FontSizeAnimation

by bacca400

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>CSS Anim ch 22</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
    
    <style>
      * { 
        box-sizing: border-box;
        margin: 8px;
        font-family: Roboto, sans-serif;
        }
      body {
        background-color: rgb(250, 245, 245);
        margin: 0;
        }
      /* Use with empty div */
      .hover-text {
        margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
      }
      .hover-text:hover {
        color: black;
        font-size: 24px;
      }
      .box {
        position: fixed;
        margin: 0;
        transform: translate(-50%, -50%); 
        width: 30px;
        height: 30px;
        background: red;
        border: 1px solid black;
        animation: size-down ease-out 0.5s infinite alternate both;
      }
      
      /* Trasform goes below */
      @keyframes size-down {
        100% { /* X,Y values */
          transform: scale(0.3, 0.3);
          background: rgb(241, 83, 241); 
        }
      }
    </style>
</head>
<body>
  <p class="hover-text">Hover over me</p>
<div class="logo">
  <div class="box box-red"></div>
  <div class="box box-blue"></div>
  <div class="box box-green"></div>
  <div class="box box-orange"></div>
</div>

<p style="margin-top:50px;">The text "Hover over me" "jumps" in size in Firefox v153.0. It does not increase in size smoothly.</p>
</body>
    <script>
    </script>
</html>