The animation is viewable on my website at www.surfturkey.net

The issue is occurring on the 'projects' page.

I am having trouble locating the problem with my CSS animation. I have an image in a CSS grid cell. I want to animate it to an absolute position near the top left corner of my page. Currently, the animation shrinks and travels up and to the right in the wrong direction, then jumps outside the grid cell and travels in the desired direction (up and to the left). I can't figure out how to make it transition smoothly from the starting location to the top left corner. I also have an animation which directly precedes the problem animation, which flies in from the left using a transform function and a rotate function. I have the animations in a class. Here's my HTML and CSS. I am using Sass, but I have formatted the code here into plain CSS.

.logo-box__logo {
  transform       : rotateZ(-40deg);
  transform-style : preserve-3d;
  width           : 30rem;
  height          : 30rem;
  }
.slidein {
  animation : slide-in-from-left 1.5s ease 0s 1 normal forwards;
  }
.shrink {
  animation : shrink-to-top 1.5s linear 2s 1 normal forwards;
  }
@keyframes slide-in-from-left {
  from { transform : translateX(-1000px); }
  to   { transform : rotateZ(-40deg);     }
  }
@keyframes shrink-to-top {
  from {
    height   : 30rem;
    width    : 30rem;
    position : relative;
  }
  to {
    height   : 10rem;
    width    : 10rem;
    position : absolute;
    top      : 2%;
    left     : 2%;
    }
  }

<div >
  <a href="index.html">
    <img  
      src="https://surfturkey.net/assets/img/surfturkey_right.png" 
      alt="A turkey on a surfboard">
  </a>
</div>

CodePudding user response：

I still don't understand why is there a grid in logo-box. but I hope this is what you want. take a look.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;

  
}

html {
  box-sizing: content-box;
  font-size: 62.5%;
}

body {
  font-family: "Nunito", sans-serif;
  color: #A5C9CA;
  background-color: #395B64;
  overflow-x: hidden;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: -webkit-min-content 20vh 70vh 100vh;
  grid-template-rows: min-content 20vh 70vh 100vh;
}

.navbar {
  grid-column: 2/3;
  grid-row: 1/2;
  font-family: "Nunito", sans-serif;
  display: flex;
  justify-content: flex-end;
}
.navbar__links {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin: 3rem;
}
.navbar__item {
  text-decoration: none;
  color: #A5C9CA;
  padding: 2rem;
  transition: color 1s;
}
.navbar__item:hover {
  color: #C84B31;
}

.slidein {
  -webkit-animation: slide-in-from-left 1.5s ease 0s 1 normal forwards;
          animation: slide-in-from-left 1.5s ease 0s 1 normal forwards;
}

.shrinkup {
  -webkit-animation: shrink-to-top 1.5s linear 2s 1 normal forwards;
          animation: shrink-to-top 1.5s linear 2s 1 normal forwards;
}

@-webkit-keyframes slide-in-from-left {
  from {
    transform: translateX(-1000px);
  }
  to {
    transform: translateX(0) rotateZ(-32deg);
    /* margin-left: 5rem; */
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translateX(-1000px);
  }
  to {
    transform: translateX(0) rotateZ(-32deg);
    /* margin-left: 5rem; */
  }
}
@-webkit-keyframes shrink-to-top {
  from {
    transform: rotateZ(-32deg);
  }
  to {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 2rem;
    left: 2rem;
    transform: rotateZ(-32deg);
  }
}
@keyframes shrink-to-top {
  from {
    transform: rotateZ(-32deg);
  }
  to {
    width: 15rem;
    height: 15rem;
    position: absolute;
    /* top: 2rem;
    left: 2rem; */
    transform: rotateZ(-32deg);
  }
}
.main-content {
  grid-row: 4/5;
  grid-column: 1/-1;
  background-color: #A5C9CA;
  width: 100vw;
}

.accent-font {
  color: #C84B31;
}

.heading {
  grid-row: 3/4;
  grid-column: 2/3;
  font-family: "Nunito", sans-serif;
  display: flex;
  flex-direction: column;
  justify-self: flex-start;
  margin-left: -12rem;
}
.heading__title {
  font-size: 14rem;
  text-align: right;
}
.heading__title a {
  text-decoration: none;
}
.heading__subtitle {
  font-size: 4rem;
  text-align: right;
}

.logo-box {
  grid-row: 1/3;
  grid-column: 3/4;
}

.logo-box__logo {
  width: 80rem;
  height: 80rem;
  position: absolute;
  left: 5rem;
  margin-top: 1.5%;
  transform: rotateZ(-32deg);
  /* border: 1px solid red; */
}/*# sourceMappingURL=main.css.map */

<body >
    <nav >
        <div >
            <a  href="#">Our Story</a>
            <a  href="projects.html">Projects</a>
            <a  href="#">Contact us</a>
            <a  href="#">Blog</a>
        </div>
    </nav>
    
    <div >
        <a href="index.html">
            <img  src="https://www.surfturkey.net/assets/img/surfturkey_right.png" alt="A turkey on a surfboard">
        </a>
    </div>

    <header >
        <h1 >Come <a href="#projects"><span >see</span></a></h1>
        <h2 >what all we're up to...</h2>
    </header>
    
    <main id="projects" >
       
    </main>
</body>