Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    Transition properties

    Set the element to transition gradually between from one CSS property to another CSS property.

    Transition type

    Set the CSS property to transition. You can apply a transition to all properties or just one property from the list.

    Options:

    • All - Transition all of the element's properties
    • None - Don't apply a transition
    • Background color - Transition the background color property
    • Color - Transition the color property
    • Height - Transition the height property
    • Width - Transition the width property
    • Custom - Specify a property to transition

    Duration (ms)

    Set the time transition will last.

    Expected value:

    • Number. This will be interpreted as milliseconds

    Accepted units:

    • Blank - The value will be converted to milliseconds
    • ms - The value will be applied in milliseconds
    • s - the value will be applied in seconds

    Delay (ms)

    Set a time delay before the transition will start.

    Expected value:

    • Number. This will be interpreted as milliseconds

    Accepted units:

    • Blank - The value will be converted to milliseconds
    • ms - The value will be applied in milliseconds
    • s - the value will be applied in seconds

    Easing

    Set the transition timing function. This sets an acceleration curve, so that the speed of the transition can vary over its duration.

    Options

    • Ease - transition effect with a slow start, then fast, then end slowly
    • Linear - Don't apply any easing
    • Ease-in - transition effect with a slow start 
    • Ease out - transition effect with a slow end
    • Ease in-out -  transition effect with a slow start and end

    https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

    Adding multiple transitions

    You can add multiple transitions to an element and set them to different timing and easing. For example, you can transition the background color of and element and then, transition the height of an element.

    To add multiple transitions:

    1. Click the Add transition button below the current transition properties
    2. A new row of transition fields will appear
    3. Add the new transition properties.
    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.