Scribd Logo
Upload

Welcome to Scribd!

  • 91 views

    CSS Animation 101 Transitions and JavaScript

    Uploaded by

    Kulin Ban
    This document discusses using JavaScript to trigger CSS transitions. It describes two methods: 1) Adding or removing classes that define different states, like "hide" and "show". When a button is clicked, the class is toggled to trigger the transition. 2) Directly setting CSS properties, like opacity, with JavaScript and applying a transition. This allows controlling transitions programmatically. The document provides examples of both methods to animate elements using transitions initiated by JavaScript events.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Animation 101 Transitions and JavaScript

    Uploaded by

    Kulin Ban
    91 views4 pages
    This document discusses using JavaScript to trigger CSS transitions. It describes two methods: 1) Adding or removing classes that define different states, like "hide" and "show". When a button is clicked, the class is toggled to trigger the transition. 2) Directly setting CSS properties, like opacity, with JavaScript and applying a transition. This allows controlling transitions programmatically. The document provides examples of both methods to animate elements using transitions initiated by JavaScript events.

    Original Title

    CSS animation 101 Transitions and JavaScript

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses using JavaScript to trigger CSS transitions. It describes two methods: 1) Adding or removing classes that define different states, like "hide" and "show". When a button is clicked, the class is toggled to trigger the transition. 2) Directly setting CSS properties, like opacity, with JavaScript and applying a transition. This allows controlling transitions programmatically. The document provides examples of both methods to animate elements using transitions initiated by JavaScript events.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    91 views4 pages

    CSS Animation 101 Transitions and JavaScript

    Uploaded by

    Kulin Ban
    This document discusses using JavaScript to trigger CSS transitions. It describes two methods: 1) Adding or removing classes that define different states, like "hide" and "show". When a button is clicked, the class is toggled to trigger the transition. 2) Directly setting CSS properties, like opacity, with JavaScript and applying a transition. This allows controlling transitions programmatically. The document provides examples of both methods to animate elements using transitions initiated by JavaScript events.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 4

    Chapter 10

    Transitions and JavaScript

    So far we’ve been using the transition property in CSS to animate between
    two states, a non-hover and a hover (or focus) state.
    These transitions have required hovering over the element. This isn’t the only way
    we can trigger animations, so today we’ll cover two ways we can use JavaScript
    to achieve the same result.

    Add or remove classes


    Since the power of transitions is to animate between two states, we can create
    those states as separate classes. Then we add or remove these classes using
    JavaScript.
    This example consists of a button and a content div. Initially the content
    container has the class hide. In the CSS, the hide class gives it an opacity of
    0.
    We also have a second class in the CSS called show. This class has an opacity of
    1.
    When the button is clicked, we toggle the class of the div between hide and
    show. To give it animation, we apply a transition to the div also.
    See it in action on this CodePen.
    If you’d like to read more, you might enjoy the article, Adding Appeal to Your
    Animations on the Web.
    Toward the end of this course we’ll look into how we can trigger transitions and
    animations on scroll.

    47
    Figure 10.1: Source: http://codepen.io/donovanh/pen/YPbxqa

    48
    Controlling transitions with JavaScript
    We can go further than adding or removing classes. Using JavaScript we can set
    the CSS properties directly like so:
    element.style.transition = 'opacity 1s ease-out';
    In this case, “element” is an element we’ve selected. For example, if an element
    has the ID “js-show”, you could apply a transition to it using getElementById:
    document.getElementById('js-show').style.transition = 'opacity 1s ease-out';
    When we do this, we must remember to include vendor prefixes too. The above
    would need to be written:
    document.getElementById('js-show').style.webkitTransition = 'opacity 1s ease-out';
    document.getElementById('js-show').style.transition = 'opacity 1s ease-out';
    Here the webkitTransition applies to any browsers that would otherwise use
    the -webkit- prefix in CSS.

    Let’s recap
    In this chapter we’ve covered the transition property. We learned we can use
    this property to tell a browser to animate from one state to another.

    Along the way we’ve learned about the various properties: duration, delay, and
    timing functions.
    Putting these together we can create interesting combinations of effects, and
    even apply multiple transitions to a single element.
    Finally, we wrapped it up today by covering how to apply these transitions using
    JavaScript.
    Transitions are but one part of the CSS Animation puzzle. Next we’ll cover the
    animation property.

    49
    Homework
    Before we start looking at the animation property, take some time to think
    about how you use transitions.
    Can you think of ways they could help smooth the interactions or state changes
    on your pages? How might they add appeal?

    50

    You might also like