What are “keyframes”

What are “keyframes”

You’ll see in Mike’s tutorial that he has declared his animation as:

1 2 3

@-webkit-keyframes slideIn {     //..snip }

If you’re reading this tutorial then there’s a good chance you won’t be familiar with this syntax. Basically, this allows you to specify what certain properties should be at a specific stage during an animation. So if we take a look at the full example:

1 2 3 4 5 6 7 8

@-webkit-keyframes slideInSmooth {   0% {     -webkit-transform: translate3d(-100%,0,0);   }   100% {     -webkit-transform: translate3d(0,0,0);   } }

What we are saying here is that at the start of the animation (0%) the element should be displaced 100% to the left (the three parameters intranslate3d represent the x, y, and z axis), so it will be just off screen. Then at the end of the animation (100%) the element should be back to its normal starting position.

We could also define a similar animation like this:

1 2 3 4 5 6 7 8 9 10 11 12 13

@-webkit-keyframes slideInSmooth {   0% {     -webkit-transform: translate3d(-100%,0,0);   }   50% {     -webkit-transform: translate3d(50%,0,0);   }   100% {     -webkit-transform: translate3d(0,0,0);   } }

Now the element would start off to the left, then go to the right and then finally get back to its normal position. You can define as many of these intermediate steps as you like, the only important thing is that you always have a 0% and 100% (alternatively, you can use from and to) otherwise the animation will be invalid.

As Mike highlighted in his post, the importance of using translate3d here rather than the left property to move the element is that by usingtranslate3d the devices GPU will be used for performing the animation.

Now that we have that animation defined, we can use it by specifying it in the CSS for the element we want to animate as the -webkit-animationlike Mike has:

1 2 3 4 5 6 7 8

.slide-in{    -webkit-animation: slideInSmooth ease-in 1;   animation: slideInSmooth ease-in 1;   -webkit-animation-fill-mode: forwards;   animation-fill-mode: forwards;   -webkit-animation-duration: 750ms;   animation-duration: 750ms; }

You can see that slideInSmooth has been supplied as the animation and a few other things are also being defined here like how long the animation should take to complete. The different properties like -webkit-animation and animation do the same thing, it’s just that different browser vendors recognise different properties so we need to include both.

Creating Animations in Ionic

Let’s take a look at a few more animations we could create in our Ionic applications. Of course, these animations won’t be specific Ionic, it’s just normal CSS, but I will be creating them on the standard Ionic UI elements.

These aren’t necessarily going to be overly useful, creative or pretty, I just want to demonstrate the concept. I’ll be using the tabs starter project that Ionic provides to play with these animations since it has a few nice UI elements built in already. If you would like to follow along you should also create a new project based on the tabs template.

Run the following command to generate a new Ionic application based on the tabs template

1	ionic start ionic-animations tabs

Run the following commands to set up SASS

1	cd ionic-animations

1	ionic setup sass

Run your Ionic application through the browser by running the following command:

1	ionic serve

Ionic List Slide in Animation

As our first animation, let’s take the example I gave above and see how it looks on the list in the Chats tab.

Add the following code to scss/ionic.app.scss

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@-webkit-keyframes slideInBothWays {   0% {     -webkit-transform: translate3d(-100%,0,0);   }   50% {     -webkit-transform: translate3d(50%,0,0);   }   100% {     -webkit-transform: translate3d(0,0,0);   } } .slide-in-both-ways {    -webkit-animation: slideInBothWays ease-in 1;   animation: slideInBothWays ease-in 1;   -webkit-animation-fill-mode: forwards;   animation-fill-mode: forwards;   -webkit-animation-duration: 750ms;   animation-duration: 750ms; }

Modify the following in tabs-chat.html:

1	<ion-content class="slide-in-both-ways">

Result

CR.http://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/