monss monss - 1 year ago 67
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 Source

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

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('');
  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>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download