CODEWITHSUNDEEP
cssanimationcss-animations
tganyan
tganyan

Reputation: 633

Trying to learn css animations, can't get it to work

I have worked with CSS for a few years now but have not done much with animations so I am trying to teach myself how to do this and so far not having much success. I set up the keyframes and then call the animation on an object but when I load the page nothing at all happens; here is the code:

HTML: 

  <head>
  <meta http-equiv="Content-Type" content="text/html;   charset=utf-8"/>
  <link rel="stylesheet" href="style.css">
  <title>CSS Animation Test</title>
  </head>
  <body>
    <div class="circle red"></div>
  </body>

CSS: 

@keyframes up-right {
  0% {
    scale: 1;
    opacity: .25
  }
  50% {
    scale: 1.5;
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: .25;
  }
}

.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  opacity: .25;
}

.red {
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: up-right 1s infinite;
  -moz-animation: up-right 1s infinite;
  -o-animation: up-right 1s infinite;
  animation: up-right 1s infinite;
}

So I must be missing something because the red circle div does absolutely nothing when I load the page, any assistance with this would be greatly appreciated. Also, on a side note, it would be helpful if anyone can post an example of the syntax for make an object actually move (change position).

Thanks!

Upvotes: 0

Views: 133

Answers (3)

K K
K K

Reputation: 18099

Everything looks good, except scale and also you need to provide browser specific css: ie.

-webkit-keyframes,-moz-keyframes,-o-keyframes etc

CSS:

@-webkit-keyframes up-right {
0% {
    transform:scale(1);
    -webkit-transform:scale(1);

    opacity: .25
}
50% {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    opacity: 1;
}
100% {
    transform:scale(1);
    -webkit-transform:scale(1);
    opacity: .25;
}
}

@keyframes up-right {
0% {
    transform:scale(1);
    -webkit-transform:scale(1);

    opacity: .25
}
50% {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    opacity: 1;
}
100% {
    transform:scale(1);
    -webkit-transform:scale(1);
    opacity: .25;
}
}

Demo: http://jsfiddle.net/GCu2D/195/

Upvotes: 2

Dharman
Dharman

Reputation: 33256

You need to be aware that keyframes use vendor prefixes as well.

@keyframes up-right {

and

@-webkit-keyframes up-right {

See:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Browser_Compatibility

Upvotes: 1

valerio0999
valerio0999

Reputation: 12138

everything is correct but you had the scale property completely wrong.. here's how to write it

 transform: scale(1.5);

http://jsfiddle.net/vlrprbttst/XAS5E/

and yes keyframes needs vendor prefixes like so @-webkit-keyframes up-right {

Upvotes: 1

Related Questions