Text aninamtion is shaking?

Question

I was coding away on my newest project of learning css animation.

I've come a long way but for some reason when I scale my div-boks with a text element inside the text begins to shake when it appears.

What is the solution to this... Btw I do care about effecienty as I will be rated on that for my project. If javascipt is a better option and you know how to provide that please do (best in the form of a tutorial page as I actually want to learn the code :D)

I will later use it to for responsive design so keep that if possible it would be nice to find a solution that cheaks that boks too

Here is the code:

function myFunction() {
    var x = document.getElementById("topnav_id");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
      document.getElementById("topnav_id").style.top = "0px";
    } else {
      document.getElementById("topnav_id").style.top = "-300px";
    }
  }

@import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* animations */

@media (prefers-reduced-motion: no-preference) {
    .fa-down-long {
        position:relative;
        animation-name: hover-up-down;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
}

@keyframes hover-up-down {
    0%   {left:0px; top:30px;}
    25%  {left:0px; top:30px;}
    50%  {left:0px; top:50px;}
    100% {left:0px; top:30px;}
  }

/*  */

@media (prefers-reduced-motion: no-preference) {
    .title {
        position:relative;
        animation-name: opacity-apper;
        animation-duration: 10s;
    }
}

@keyframes opacity-apper{
    0%   {opacity: 0%; transform: scale(0.5);}
    100% {opacity: 100%; transform: scale(1);}
}

* *:not(.topnav, #topnav){
    margin: 0;
}

.background {
    height: 100vh;
}

.background_header{
    background-color: black;
    background-image: url(/assets/placeholders/Front\ page.jpeg);
    background-position: center;   
}

.background_black{
    background-color: black;
}

h1{
    font-size: 8vw;
}

h2{
    font-size: 3vw;
    font-weight: 300;
}

.title {
    display: grid;
    grid-template-rows: 200px auto ;

    font-family: 'Oswald', sans-serif;
    color: white;
    text-align: center;

    padding-top: 30vh;
    justify-content: center;
}


/* menubar */

@media screen and (min-width: 600px) {
    .flex{
      display: flex;
      align-items: center;
      column-gap: 2rem;
    }
  }
  
  #topnav_id{
    top: -300px;
    transition: top 0.3s;
  }
  
  /* menubar responsvie */
  
  .logo{
    color: black;
    width: 300px;
  }
  
  @media screen and (min-width:600px) {
    .topnav{
      position: fixed;
      display: flex;
      width: 100%;
      z-index: 99;
    }  
  }
  @media screen and (max-width:600px) {
    .topnav{
      position: fixed;
      display: block;
      width: 100%;
      z-index: 99;
    }  
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(255, 255, 255);
  }
  
  .dropdown-content a:hover {
    background-color: rgb(243, 243, 243);
    color: black;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  
  @media screen and (max-width: 600px) {
    .topnav a:not(.active), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: fixed;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }





    
    
    
    Beta1
    
    


    
        
            
                
                
                  Skills
                  About
                  Contact
                  
                    
                    
                      Design
                      School
                      Public
                      Social Media
                     
                
                    ☰
                 
            
            
                I Make Visions Into Reality
                Scroll to find More!

Thanks

user_19192296 · Answer

Animations that scale or move position can cause "lag" or "stuttering", especially for low/mid end pc's. It's also recommended not to play too many animations at the same time since that can cause stuttering too. I have a portfolio website with a lot of animations which run fine on my personal pc, but can stutter on my work laptop. I'm thinking that's the issue in this case since your animation runs fine for me.

an article that might help: https://www.keycdn.com/blog/animation-performance

Text aninamtion is shaking?

1 Answers