CSS Transition Fade in Only for Element

CSS transition fade in only the background not the child divs

Move the background to a new div inside of the .content_top element. This will create a new layer which we can animate without affecting the content.

Give .content_top and .main_header a position: relative value. This will make the .content_top a relative container, and give .main_header the possibility to use the z-index.

In the snippet below I've added a new element: .main_bg. This element will get the background image and the animation.

Give the .main_bg element a position: absolute;. This will allow you to overlay elements on top of each other, in this case .main_bg and .main_header.

setTimeout(function() {
  // Set BG image
  var bg_content = document.querySelector('.main_bg');
  bg_content.style.background = "linear-gradient(0deg,#000 0,rgba(0,0,0,.7) 35%,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 100%),url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg) no-repeat";
  bg_content.style.backgroundSize = "cover";
  bg_content.style.backgroundPosition = "center";
  bg_content.classList.add("fade-in");

}, 1500);

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.main_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main_header {
  position: relative;
  color: blue;
  text-align: center;
  font-size: 30px;
  z-index: 1;
}

.content_top {
  height: 300px;
  position: relative;
}

<div class="content_top">
  <div class="main_bg"></div>
  <div class="main_header"><span class="vertical_line"></span>
    <p data-transkey="main_header_notrans"><span class="tino">Some header</span> <br> some text</p>
  </div>
</div>

CSS how to make an element fade in and then fade out?

Use css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

here is a DEMO

.elementToFadeInAndOut {    width:200px;    height: 200px;    background: red;    -webkit-animation: fadeinout 4s linear forwards;    animation: fadeinout 4s linear forwards;}
@-webkit-keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}
@keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}

<div class=elementToFadeInAndOut></div>

CSS3 fade in without fade out - one way transition

The magic trick is to remove the transition in the basic class an append it in the show class.

$("button").on("click", function(){  $("#container").toggleClass("show")})

#container {  color: white;  background: #357700;  opacity: 0;  overflow: hidden;  transition: none;}
#container.show {  opacity: 1;  transition: all 1s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Show/Hide</button>
<div id="container">  <p>Hello World</p></div>

Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none?

As LGSon presented on the comments (and later on an answer), an alternative to display:none is height:0 combined with overflow:hidden.

So I did use this method together with opacity values on keyframes/transition to reproduce the fade-in/fade-out effects of the OP snippet, but without any javascript.

transition-timing-function: cubic-bezier was used to perform a quick jump to height:0

#b {  overflow: hidden;  height: 0;  opacity: 0;  -webkit-transition: opacity 1s, height 1s cubic-bezier(1,0,1,0); /* Safari */  transition: opacity 1s, height 1s cubic-bezier(1,0,1,0);  background: skyblue;}
#a:hover ~ #b {  opacity: 1;  height: 60px;  -webkit-animation: animate 1s; /* Chrome, Safari, Opera */   animation: animate 1s;  height: 60px;}
@keyframes animate {    0%   {opacity: 0;  height: 60px;}    100% { opacity: 1;  height: 60px;}}
div {  width: 58px;  height: 58px;  vertical-align: middle;  outline: 1px solid black;  line-height: 60px;  text-align: center;  }
#a {  background: tomato;  }
#c {  background: greenyellow;  }

<div id=a>OVER</div><div id=b>B</div><div id=c>C</div>

Fade out, pause, then fade in an element - CSS Only

For achieving that effect, you would have to modify your keyframes like in the below snippet.

Set the animation-duration such that it is the total time for the fade-out + pause + fade-in. Here I have set the duration as 10s (2.5s for fade-out + 5s pause + 2.5s for fade-in).
Set the keyframe percentages to match the expected durations like below:
- At 25% mark (which is nothing but 2.5s of 10s) change the opacity from 1 to 0.
- A 5s pause period is nothing but 50% of 10s and so make the element hold its state till the 75% mark. It is critical that the 75% keyframe is also added (even though the element stays in the state) because otherwise the element would start fading-in from the 25% mark itself.
- Starting at the 75% mark, make the element's opacity change gradually from 0 to 1 and thereby producing the fade-in effect.

Note: I have removed the vendor-prefixed versions of the properties to keep the demo simple and I've also removed the repetitive declaration of animation-fill-mode and -webkit-animation-fill-mode as at any point of time only one would be used by a browser. Webkit browsers would use the prefixed one as it appears last whereas other browsers would use the unprefixed one (and thus would result in cross-browser differences).

.hideMe1 {  animation: hideMe 10s 1;  animation-fill-mode: forwards;  animation-delay: 2s;}.hideMe2 {  animation: hideMe 10s 1;  animation-fill-mode: forwards;  animation-delay: 2.5s;}@keyframes hideMe {  0% {    opacity: 1;  }  25% {    opacity: 0;  }  75% {    opacity: 0;  }  100% {    opacity: 1;  }}

<div class="hideMe1">  I'll fade first</div><div class="hideMe2">  My turn to fade</div>

CSS Transition - Fade Element on Hover only

Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:

#myLink {
    opacity: 0;
}

#myLink:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

And here's a jsFiddle to demonstrate: Fiddle

How can I fade one element into another with CSS?

First things first, I am going to add classes to your HTML elements to use as styling hooks that will make working with them easier. It is also just the best practice to use classes for the majority of styling in CSS. The wrapping class, or "stage" for the animation, will get the class fader-stage. Every "slide" (what I am going to be calling each div element that will fade out and into another) gets the same general class applied to it, fader-slide, and I also apply a unique class for each individual slide that denotes its number in the presentation order (fader-slide--1, fader-slide--2, and so on if you were to add more elements).

<div class="fader-stage">
    <div class="fader-slide fader-slide--1">Expand your knowledge</div>
    <div class="fader-slide fader-slide--2">Blah Blah Blah</div>
</div>

Now for the CSS! ...I am going to start with styling the wrapping div element by using the class hook, fader-stage, we added to the HTML in the above step.

.fader-stage {
    border: 2px solid #000;
    height: 12rem;
    margin: 2rem auto;
    position: relative;
    width: 50%;
}

The only part of this style that you absolutely have to keep "as is" here is position: relative. We use this on a containing element so that when we use position: absolute on the child elements in the next step, it doesn't make them position themselves according to the root element of the document, they will instead position themselves according to closest relatively positioned ancestor element (this one). Everything else in this wrapper class can be changed according to your taste, or the particular specifications of the project.

Now we create a simple animation using @keyframes that will take the opacity level from 1 to 0. Seems like we can keep it simple and just call the effect fade-out. We will use this identifier with the animation property in the next step. You can read more about keyframes here if you'd like to know more about this CSS at-rule.

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

    100% {
        opacity: 0;
    }
}

Now we need to style the "slide" elements that you want to fade into one another. We will be using the general class that we have applied to all the slides, fader-slide.

I set some pretty general styles on fader-slide. I wanted to make each slide take up the maximum amount of space in the wrapping div, and to center all of each slide's content.

I use position: absolute as a way to take each slide out of the normal flow of the document, which will effectively allow them to sit on top of one another. I then set the top and left properties to 0 in order to position the element start at the top left corner of the stage. Had we not set the position property to relative on the fader-stage element in the previous step, doing this would instead position the slides in the top left corner of the document.

I used flexbox properties to easily ensure that everything that is inside the slides gets centered horizontally and vertically.

Most importantly though, I also applied the fade-out animation we made in the keyframes step above. I tell the animation to go through the keyframes animation named fade-out, for that animation to have a duration of 2.5s, to use the ease-out animation-timing-function when animating, to run an infinite amount of times, and to alternate back and forth when it gets to the end of the animation. I do all of that in one line of CSS by using the animation shorthand property.

.fader-slide {
    align-items: center;
    animation: fade-out 2.5s ease-out infinite alternate;
    background: #015e89;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

For each individual slide, I then apply an increase of the animation-delay property of 2.5s for each subsequent slide. You can obviously change the animation duration, delay, and timing function to anything you'd like. If you want each slide to begin to fade out as soon as it fully appears then it would be best if the animation duration and each delay increment were equal to one another. For any additional slide you wanted to add, you would just add the delay amount you've chosen to the previous delay amount and then just keep increasing it. This is the way I have done it. I add the z-index property with a value of 1 to the first slide so that it sits on top of the others at the start of the animation after the page loads. Otherwise, the last slide in the DOM order will be on top at the beginning. To make the fading effect more obvious, I would also change the background-color on each subsequent slide.

.fader-slide--1 {
    animation-delay: 2.5s;
    z-index: 1;
}

.fader-slide--2 {
    animation-delay: 5s;
    background-color: #018970;
}

Here is a codepen so you can see it all working together. /p>

STROBE WARNING: If you have epilepsy, or suffer from seizures or headaches caused by pulsing light, you may want to avoid viewing this example. The effect is mild in my estimation, but it will automatically play when you follow the above link so I believe it fair to give warning to anyone sensitive to such things.

And here is all the CSS from above in one, easy to copy/paste snippet:

.fader-stage {
    border: 2px solid #000;
    height: 12rem;
    margin: 20px auto;
    position: relative;
    width: 50%;
}

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

    100% {
        opacity: 0;
    }
}

.fader-slide {
    align-items: center;
    animation: fade-out 2.5s ease-out infinite alternate;
    background: #015e89;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.fader-slide--1 {
    animation-delay: 2.5s;
    z-index: 1;
}

.fader-slide--2 {
    animation-delay: 5s;
    background-color: #018970;
}

There is a lot more we could do with it if we kept going, but I believe this achieves the specifications laid out in your question as I understand them.

If you are not using something like Autoprefixr or Prefixfree to apply vendor prefixes to your CSS then you may want to add the -webkit (and possibly -moz and -ms) prefix to the animation property, as well as animation-delay, the @keyframes, and potentially also the flexbox properties (display: flex, align-items: center, and justify-content: center), but only if you want to cast a wide net for backwards browser compatibility. If you don't know how to do this or what I'm talking about let me know and I'll edit to include the browser prefixes.

Autoprefixer also has an online tool for adding vendor prefixes, if you don't want to set it up with PostCSS as package dependency for your project. To use the online tool you just give the app a string describing the browsers you want to target, paste in your CSS, and it will return your CSS with the vendor prefixes necessary to (mostly) ensure compliance with your target browsers added.

If you have any other questions about this method just let me know and I would be happy to help. ‍/p>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>