CSS Fade Left to Right

CSS fade left to right

Yes, you can do it with CSS3 animations (check browser support here).

Here's a simple demo for text-fading.

HTML:

.text {

        position:relative;

        line-height:2em;

        overflow:hidden;

    }

    .fadingEffect {

        position:absolute;

        top:0; bottom:0; right:0;

        width:100%;

        background:white;

        -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */

        -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */

        -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */

        -o-animation: showHide 5s ease-in alternate infinite; /* Opera */

        animation: showHide 5s ease-in alternate infinite;

    }

    @-webkit-keyframes showHide { /* Chrome, Safari */

        0% {width:100%}

        40% {width:0%}

        60% {width:0%;}

        100% {width:100%;}

    }

    @-moz-keyframes showHide { /* FF */

        0% {width:100%}

        40% {width:0%}

        60% {width:0%;}

        100% {width:100%;}

    }

    @-ms-keyframes showHide { /* IE10 */

        0% {width:100%}

        40% {width:0%}

        60% {width:0%;}

        100% {width:100%;}

    }

    @-o-keyframes showHide { /* Opera */

        0% {width:100%}

        40% {width:0%}

        60% {width:0%;}

        100% {width:100%;}

    }

    @keyframes showHide {

        0% {width:100%}

        40% {width:0%}

        60% {width:0%;}

        100% {width:100%;}

    }

<div class="text">

    There is some text here!

    <div class="fadingEffect"></div>

 </div>

Pure CSS fade-in fade-out each from left to right

We can take advantage of the fact that some properties can be transitioned and others can happen instantly.

In this snippet the background-color of the input is changed instantly on hover, its background image which consists of a blue part and a yellow part initially is changed to a transparent part and a yellow part on hover.

The only property that is transitioned is the background sizes of the two linear gradients.

input {
  background-color: yellow;
  background-image: linear-gradient(cornflowerblue, cornflowerblue), linear-gradient(yellow, yellow);
  background-size: 100% 100%, 0% 100%;
  background-position: left top, left top;
  background-repeat: no-repeat;
  transition: background-size 5s linear;
  border: none;
}

input:hover {
  background-color: cornflowerblue;
  background-image: linear-gradient(transparent, transparent), linear-gradient(yellow, yellow);
  background-size: 0% 100%, 100% 100%;
}

<input>

HTML/CSS: How to fade the left and right edges of a div?

The default of linear gradients run from top to bottom. So, you need to use to left or to right with transparent. To make it more clear you have to reduce transparency. The transition is made between two-color or more which creates a band of colors that progress in a straight line. See here.

.container {
      height: 234px;
      width: 234px;
      overflow: scroll;

      mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
      -webkit-mask-image: linear-gradient( to right,transparent,
          black 20%,
          black 80%,
          transparent 100%);
          
    }

    .container::-webkit-scrollbar {
      display: none;
    }

 

<div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Impedit dolorem libero, dolor,
      fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
      Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Impedit dolorem
      libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
      autem fugiat! Dicta eius repellendus totam qui maiores odio a!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a!
    </p>
  </div>

CSS Transition Fade Direction

I will put my comment as a answer since his problems is solved.

CSS fade left to right

Fade in enter (from right to center) and leave (from center to left)

You don't have dependency on ng-animate. And even if you did, it won't work, because ng-animate supports directives like ng-view, ng-show, ng-hide, ng-repeat.

What you are doing is simply changing the visible text. You need to make use of either of these directives to make ng-animate work.

Instead, if you want it to work, you will have to add these classes yourself, and it can be done using JQlite API, you can make use of addClass(), removeClass() and toggleClass().

var element = angular.element( 'id' );

/** Use timeouts to clearly decide when an element at which state. */
element.addClass( 'ng-enter' );

An another solution using KeyFrames has been implemented here.

Using CSS for a fade-in effect on page load

Method 1:

If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

• http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation

Method 2:

Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load";

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions

Method 3:

Or, you can use the method that .Mail uses:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support

jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/


jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.

How to fade out an image from right to left?

The problem is that img tag cannot have :before or :after pseudo elements, because image is the tag that doesn't have content (that's why it's self-closing tag <img />).

You can simply wrap image with a div and apply gradient styles to its :before instead:

.img-wrap {
    position: relative;
} 
.img-wrap::before {
    background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    ...
}

HTML:

<div class="img-wrap">
    <img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt="Sample Image"/>
</div>

Demo: http://jsfiddle.net/xwcb7x05/1/

---

Related Topics