Animation Event

Published: November 20, 2017By brooklynwriters
  • Animation Name
  • Animation Duration
  • Animation Timing Function
  • Animation Delay
  • Animation Iteration Count
  • Animation Direction
  • Animation Fill Mode
  • Animation Play State
  • Animation Event
  • Animation Event Target

Custom Microthemer option. Choose an event that triggers the animation. If you leave this field blank, the animation will run as soon as the page loads.

Note: if you choose a JavaScript event (e.g. inView or click), Microthemer will include an extra JS file (animation-events.js) on your site to enable this behaviour.

Value Description
hover(CSS event) The animation will run when a user hovers over the element.
focus(CSS event) For forms fields and other elements that can gain focus. The animation will run when the element gains focus.
inView(JS event) The animation will run when ever the element scrolls into view.
inView (once)(JS event) The animation will run once if the element scrolls into view.
click(JS event) The animation will run when a user clicks the element.

Themeover CSS Reference

Close