CODEWITHSUNDEEP
htmlcssanimationkeyframe
Hanfei Sun
Hanfei Sun

Reputation: 47051

In CSS 3, why using `@keyframes` doesn't work here?

Below are the codes:

div.circle {
  height: 134px;
  width: 134px;
  background-color: #000;
  margin: 50vh auto 0;
  transform: translateY(-50%);
  border-radius: 50%;
  animation-name: example;
  animation-duration: 2s;
}
@keyframes example {
  from : {
    height: 134px;
    width: 134px;
  }
  to : {
    height: 200px;
    width: 200px;
  }
}
<div class="circle"></div>

I want to make the circle larger by using @keyframes in CSS. However, I found there is no animation at all in Chrome even I added animation-name and animation-duration for that element. (Moreover, adding browser-prefix doesn't fix this..)

Does anyone have any ideas about this? Thanks!

Upvotes: 0

Views: 58

Answers (1)

Ahs N
Ahs N

Reputation: 8366

This is what your css code should be:

div.circle {
    height: 134px;
    width: 134px;
    background-color: #000;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border-radius: 50%;
    //animation-name: example;
    //animation-duration: 2s;
    animation: example 2s infinite;
    -webkit-animation: example 2s infinite;
}
@keyframes example {
    from {
        height: 134px;
        width: 134px;
    }
    to {
        height: 200px;
        width: 200px;
    }
}
@-webkit-keyframes example {
    from {
        height: 134px;
        width: 134px;
    }
    to {
        height: 200px;
        width: 200px;
    }
}

Here is the JSFiddle demo

There were two things wrong with your code.

You need to use @-webkit-keyframes for chrome browser. Second thing is that you need to remove : from from : { and to : { , because that is a syntax error.

Upvotes: 1

Related Questions