README.md

Fade in dynamically created elements using CSS3 animations

A simple proof of concept where CSS3 animations with animation-fill-mode: forwards is used to fade in elements created and added to DOM with JavaScript.

main.js

$(function()
{
    var $dynamicallyCreatedElement = $('<p class="dynamically-created-element">This will fade in!</p>');
    $('body').append($dynamicallyCreatedElement);
});

styles.css

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.dynamically-created-element {
    opacity: 0;
    
    animation-name: fade-in;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}