Pro builder - Animations

[Pbalazs89]

Hi there,

I’m trying to achieve a simple growth animation on my site.

Here’s the page, the animation is for the five services at the top of the page under the slider

https://mosontelecom.ethermedia.hu/

Here’s the CSS:

@-webkit-keyframes myanimation {

0%{
    }
100%{
    transform: rotate(xx) scale(1.1);
    }

}

@keyframes myanimation {

0%{
    }
100%{
    transform: rotate(xx) scale(1.1);
    }

}

.csomag-hover:hover {border-color: #4CC200; box-shadow: 0px 2px 4px #4CC200; animation: myanimation 1s 1 0s linear;}
.csomag-hover {animation: myanimation 1s 1 0s linear;}

I can’t figure out why it won’t work. Can you help?

[lely]

Hi There,

You do have syntax error and wrong value:

@-webkit-keyframes myanimation {
  0%   {  }
  100% { transform:rotate(75deg) scale(1.1); }
}
@-moz-keyframes myanimation {
  0%   {  }
  100% { transform:rotate(75deg) scale(1.1); }
}
@-o-keyframes myanimation {
  0%   {  }
  100% { transform:rotate(75deg) scale(1.1); }
}
@keyframes myanimation {
  0%   { }
  100% { transform:rotate(75deg) scale(1.1); }
}
.csomag-hover:hover {
        border-color:#4CC200;
        box-shadow:0px 2px 4px #4CC200;
        animation:myanimation 1s 1 0s linear;
        -webkit-animation: myanimation 5s infinite; /* Safari 4+ */
        -moz-animation:    myanimation 5s infinite; /* Fx 5+ */
        -o-animation:      myanimation 5s infinite; /* Opera 12+ */
        animation:         myanimation 5s infinite; /* IE 10+, Fx 29+ */
}
.csomag-hover {
    animation:myanimation 1s 1 0s linear;
}

See this guide: https://css-tricks.com/snippets/css/keyframe-animation-syntax/