How To Animate Java

this video will demonstrate how to animate element in the slide of impress.js presentation here is our example presentation i'm going to make the word "second" rotate when this slide is brought up but first we need to understand how impress.js works when initialized, impress.js will automatically assign a "state" classes to each slide

How To Animate Java, at first, all slides will get "future" class and when the slide is brought up, impress.js will change 'future' into 'present' class and when the next slide is brought up, the 'present' is changed to 'past' currently we're at second slide so it has 'present' class

now we're at third slide, the 'present' was changed to 'past' the state class will get updated everytime the slide is navigated so we're going to insert in-slide animation by using these state classes first, i'm going to wrap the word "second" with tag and add class="animation-rotate" (you can name anything) next, i'll add some css3 effect by using ".present" as part of css selector so this css3 transformation will be applied when the slide is brought up (when .present is assigned to the slide) you also need to add some transition-delay a bit or the animation will fire immediately before the slide transformation is finished i also need to add "display: inline-block" in order to get our transformation to work

done! hope you enjoy with my tutorial and make an impressive presentation! please feel free to share your ideas thanks for watching! please subscribe if you like :)