CODEWITHSUNDEEP
csscss-animations
ocram
ocram

Reputation: 1434

CSS Transition on page load

I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/

I thought this was the code necessary for it but it doesn't work. What is missing?

div {
    opacity .4s,transform .4s
}

Upvotes: 0

Views: 9732

Answers (2)

Frits
Frits

Reputation: 7614

There are three things wrong here.

Firstly opacity .4s,transform .4s is not a valid CSS declaration.

The correct syntax looks like this:

div {
    -webkit-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s;
}

Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;

div {
    opacity: 0;
    -webkit-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s;
}

div.showing {
    opacity: 1;
}

Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.

A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.

jQuery(window).load(function(){
    $('div').addClass('showing');
});

Upvotes: 2

neuropaddy
neuropaddy

Reputation: 57

Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.

<article class="work-item in-view" ...>    
 <picture>
  <source></source>
  <source></source>
  <source></source>
  <img></img>
  <div class=content>
    /* pop up text content*/
  </div>
 </picture>
</article>

.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}

.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}

I hope this findings may help you. If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.

Upvotes: 0

Related Questions