Quickly add CSS Fade in animations

  • Topics:

    • Our original post on fancy fade in animations on page load  got really popular so we decided to create a really quick and dirty way to add Fading animations to your site.
     In essence this is very similar to our original tutorial, however this one comes already with built in fadeInLeft, fadeInRight, fadeInDown and fadeInUp animations. We borrowed these classes from animate.css framework so all credit goes to Daniel Eden. You can download the full animate.css from his site which comes with a boat load of animations that you will probably never use. So why add another css file to your project when you can just add the ones that are used the most.

    Don’t have time to read? Just skip and add this css to yours and you can start using it right out of the box.

    See the Pen QjZjPG by Alex (@fabriceleven) .

    How it works

    We have a trigger that needs to be added anytime animation is to be used. We set it to be animate and it looks like this

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
     
    /*=== Trigger  ===*/
    .animate {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
     

    Then we have delay, for example:  (you can modify it to be whatever you want)

    1
    2
    3
    4
    5
    6
    7
    8
    9
     
     
    .one {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
    }
     
     

    And finally the rest is just the animation itself. It consists of @keyframe that tells what’s changing and how, as well as the keyframe pointer.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
     
    @-webkit-keyframes fadeIn {
      from {
        opacity: 0;
      }
     
      to {
        opacity: 1;
      }
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
     
      to {
        opacity: 1;
      }
    }
     
    /*--keyframe pointer --*/
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
     
     

    That’s all you need to create these animations! So your html might look like this:

    1
    2
    3
    4
    5
    6
    7
     
     
    <div class="box animate fadeInUp one">
        Going up
    </div>
     
     

    First class is just to style our object, second is the trigger, then animation name followed by an optional delay.

    Final CSS you can just copy and paste to yours

    The below css has the following animations: fadeIn, fadeInDown, fadeInUp, fadeInLeft and fadeInRight . Just add this CSS to the bottom of yours and you can start using them just like in our example. More run down how this works and creating custom animations is in our original tutorial.

    CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
     
     
    /*=== Basic box styling  ===*/
    .box {
      background: #23a3d3;
      width: 150px;
      height: 70px;
      padding: 20px;
      text-align: center;
      color: white;
      border-radius: 7px;
      float: left;
      margin: 4px;
      font-family: 'helvetica';
      text-transform: uppercase;
    }
     
     
    /*=== Trigger  ===*/
    .animate {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    /*=== Optional Delays, change values here  ===*/
    .one {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
    }
     
    .two {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    animation-delay: 1.7s;
    }
     
    .three {
    -webkit-animation-delay: 2.3s;
    -moz-animation-delay: 2.3s;
    animation-delay: 2.3s;
    }
     
    .four {
    -webkit-animation-delay: 3.3s;
    -moz-animation-delay: 3.3s;
    animation-delay: 3.3s;
    }
     
    /*=== Animations start here  ===*/
    /*=== FADE IN  ===*/
    @-webkit-keyframes fadeIn {
      from {
        opacity: 0;
      }
     
      to {
        opacity: 1;
      }
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
     
      to {
        opacity: 1;
      }
    }
     
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
     
     
    /*=== FADE IN DOWN ===*/
    @-webkit-keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
    @keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
     
    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
    }
     
    /*==== FADE IN UP ===*/
    @-webkit-keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
     
    .fadeInUp {
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp;
    }
     
    /*=== FADE IN LEFT ===*/
    @-webkit-keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
    @keyframes fadeInLeft {
      from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
     
    .fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft;
    }
     
     
    /*==== FADE IN RIGHT ===*/
    @-webkit-keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
    @keyframes fadeInRight {
      from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
     
      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }
     
    .fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
    }
     
     

    The only limitation of this is that it only animates once. So if you have a lot of these on a page and some below the fold, even though you have added a delay they might get executed before user actually sees them. The solution is to have these animations come in as user scrolls all you need is include 1 small js file and you are set (you can still use the above tags you just will use a different trigger word other than animate, see our tutorial

    Let us know how you are using this! Again remember to not overdo it, fadeIn and fadeInUp look the best (you can see it on our about us page as you scroll).

    In Development