monss monss - 2 months ago 7
CSS Question

Animate with css and without using hover

When user comes to the page, the big VEGA logo is in the center. Like This: [![enter image description here][1]][1]
After 2 seconds the logo starts moving up to the corner. Like This: [![enter image description here][2]][2]

How can this be achieved with css? And it all has to happen without hovering.

Answer

Without knowing your HTML structure you can do something like this:

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px; /* Just for demo purpose to see the animation */
}
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px; /* Logo width */
  height: 200px; /* Logo height */
  margin-left: -100px; /* Logo width divided by two */
  margin-top: -100px; /* Logo height divided by two */
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  animation-name: movelogo; /* Name of animation */
  animation-duration: 1s; /* Duration of animation */
  animation-iteration-count: 1; /* Number of times animation is ran */
  animation-timing-function: ease-out; /* Easing of animation */
  animation-fill-mode: forwards;
  animation-delay: 2s; /* Delay before animation */
}
@keyframes movelogo {
  0% {
    top: 50%;
    left: 50%;
    width: 200px; /* Start logo width */
    height: 200px; /* Start logo height */
  }
  100% {
    top: 0;
    left: 0;
    margin-left: 10px; /* Remove the minus margin and set  your own (Could be also zero and just set top and left values */
    margin-top: 10px; /* Remove the minus margin and set  your own (Could be also zero and just set top and left values */
    width: 100px; /* End logo width */
    height: 100px; /* End logo height */
  }
}
<div class="wrapper">
  <div class="logo"></div>
</div>

Just fit this with your existing HTML. You can also add -webkit- prefixes etc on the keyframes function to make it more browser supportive.

Comments