CODEWITHSUNDEEP
css3dperspective
EasyBB
EasyBB

Reputation: 6554

CSS3 3D animation not playing

Can someone explain to me why my animation is not working? I'm sure I am missing something very obvious like an order or something of the sort.

@-webkit-keyframes tilter{
0%{
    -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
}
100%{
    -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    transform: perspective(320px) rotate3d(0, 1, 0, 8deg);  }
}
@keyframes tilter{
0%{
    -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
}
100%{
    -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
 }
}
.tilting{
  backface-visibility: visible !important;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation: tilter ease-in infinite; 
          animation: tilter ease-in infinite;
  height:200px;
  width:200px;
  background:#f00;
 }

http://jsfiddle.net/5cd2P/1/

Upvotes: 0

Views: 94

Answers (1)

EasyBB
EasyBB

Reputation: 6554

The reason this did not fire off was because I had the animation shorthand written incorrectly.

animation: [Animation Name] (tilter)
           [Animation Duration] (3s)
           [Timing Function] (ease-in)
           [Delay] (0s)
           [Iteration Count] (infinite)
           [Direction]
animation: tilter 3s ease-in 0s infinite;

Updated Fiddle

Upvotes: 2

Related Questions