Create Transitions Using Helper Classes
Step 1 Add fx/transition to your article’s assets.
Step 2 Type some text in the box and pick classes using the buttons below.
Step 3 Add these classes to the thing you’d like to animate in the Codex editor:
Roll Your Own With CSS
If you want more control, it’s easy to add your own transitions using CSS. This also lets you apply the effect to many elements on the page at the same time.
Step 1 Add fx/transform to your article’s assets.
Step 2 Pick the transition you want to customize in the class name generator above.
Step 3 Enter the selector for the HTML element (or series of elements) that you are targeting, e.g. aside.pullquote will target all the pull quotes on the page and h1.hed would target the headlines.
Step 4 Paste this code into the styles editor of your article:
Or use this code, which takes advantage of the transition shorthand property:
Step 6 Customize the values for your transitions. For instance, if you wanted a more aggressive zoom, you could change the values in the zoom animation to scale(.7) or even scale(.5).