CODEWITHSUNDEEP
htmlcss
user9192087
user9192087

Reputation:

Animation Button css

I'm trying to do an css animation on a button, to move from left to right and right to left (quickly), then stop and do the same action again.

HTML and Style 

button {
  background: red;
  position: relative;
  -webkit-animation: mymove infinite;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 6s;
  /* Safari 4.0 - 8.0 */
  animation: mymove infinite;
  animation-duration: 1s;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 10px;
  }
}

@keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 10px;
  }
}
<button>value</button>

i tried this, but i'm not satisfied, any suggestions please ? what i want is to move the button very quickly from the left to right and stops then move again.

Upvotes: 1

Views: 138

Answers (6)

Alexis Vandepitte
Alexis Vandepitte

Reputation: 2088

Thanks to can i use - https://caniuse.com/#feat=css-animation - and this statistic : https://clicky.com/marketshare/global/web-browsers/safari/, i think you do not need prefix.

Anyway, you can use percentage instead of "to" and "from", so you can be very specific.

button {
  background: red;
  position: relative;
  animation: mymove infinite 3s;
}


@keyframes mymove {
   0% {left: 0px;}
  10% {left: 10px;}
  70% {left: 10px;}
  100% {left: 0px;}
}
<button>value</button>

Upvotes: 1

Deepak Kumar
Deepak Kumar

Reputation: 355

You want this examle ? 

button {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: myfirst 5s 2;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate;
  /* Safari 4.0 - 8.0 */
  animation: myfirst 5s 2;
  animation-direction: alternate;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes myfirst {
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}

@keyframes myfirst {
  0% {
    background: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background: red;
    left: 0px;
    top: 0px;
  }
}
<button type="button">go</button>

Upvotes: 0

Sandeep Suthar
Sandeep Suthar

Reputation: 57

Try these and change in margin-left: 50px; for increase or decrease Movement area..

button {
  background: red;
  position: relative;
  -webkit-animation: mymove infinite;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.5s;
  /* Safari 4.0 - 8.0 */
  animation: mymove alternate infinite;
  animation-duration: 1.5s;
}

@-webkit-keyframes mymove {
  0% {
    margin-left: 0px;
  }
  50% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0px;
  }
}
<button>value</button>

Upvotes: 0

sol
sol

Reputation: 22959

You can use % values in the keyframes.

fiddle

button {
  background: red;
  position: relative;
  animation: mymove infinite;
  animation-duration: 1s;
}

@keyframes mymove {
  0% {
    left: 0px;
  }
  1% {
    left: 10px;
  }
  2% {
    left: 0px;
  }
  98% {
    left: 0px;
  }
  99% {
    left: 10px;
  }
  100% {
    left: 0px;
  }
}
<button>
  value</button>

Upvotes: 0

Ivo
Ivo

Reputation: 2636

With keyframes you can use % instead of from and to

with this you have more control on the timing part.

More info

Upvotes: 0

Maher
Maher

Reputation: 2547

You can use keyframes percent to handle your events, like this:

button {
    background: red;
    position: relative;
    animation: mymove infinite;
    animation-duration: 10s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0% {
        left: 0%;
    }

    50% {
        left: 100%
    }

    100% {
        left: 0;
    }
}
<button>value</button>

Upvotes: 0

Related Questions