css3 transition animation on load

Question

Is it possible to use CSS3 transition animation on page load without using Javascript   This is kind of what I want  but on page load   http   rilwis googlecode com svn trunk demo image-slider html  What I found so far   CSS3 transition-delay  a way to delay effects on elements  Only works on hover  CSS3 Keyframe  works on load but are extremly slow  Not useful because of that  CSS3 transition is fast enough but don t animate on page load

User · Answer

I think I have found a sort of work around for the OP question - instead of a transition beginning 'on.load' of the page - I found that using an animation for an opacity fade in had the same effect, (I was looking for the same thing as OP).

So I wanted to have the body text fade in from white(same as site background) to black text colour on page load - and I've only been coding since Monday so I was looking for an 'on.load' style thing code, but don't know JS yet - so here is my code that worked well for me.

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

And for whatever reason, this doesn't work for .class only #id's(at least not on mine)

Hope this helps - as I know this site helps me a lot!

User · Answer

You can run a CSS animation on page load without using any JavaScript  you just have to use CSS3 Keyframes  Let s Look at an Example    Here s a demonstration of a navigation menu sliding into place using CSS3 only   x000D   x000D   keyframes slideInFromLeft     0        transform  translateX -100          100        transform  translateX 0          header          This section calls the slideInFromLeft animation we defined above      animation  1s ease-out 0s 1 slideInFromLeft       background   333    padding  30px        Added for aesthetics    body  margin  0 font-family   Segoe UI   Arial  Helvetica  Sans Serif   a  text-decoration  none  display  inline-block  margin-right  10px  color  fff   x000D   lt header gt     lt a href     gt Home lt  a gt     lt a href     gt About lt  a gt     lt a href     gt Products lt  a gt     lt a href     gt Contact lt  a gt   lt  header gt  x000D   x000D   x000D   Break it down    The important parts here are the keyframe animation which we call slideInFromLeft     keyframes slideInFromLeft       0            transform  translateX -100              100            transform  translateX 0               which basically says  quot at the start  the header will be off the left hand edge of the screen by its full width and at the end will be in place quot   The second part is calling that slideInFromLeft animation  animation  1s ease-out 0s 1 slideInFromLeft   Above is the shorthand version but here is the verbose version for clarity  animation-duration  1s     the duration of the animation    animation-timing-function  ease-out     how the animation will behave    animation-delay  0s     how long to delay the animation from starting    animation-iteration-count  1     how many times the animation will play    animation-name  slideInFromLeft     the name of the animation we defined above     You can do all sorts of interesting things  like sliding in content  or drawing attention to areas  Here s what W3C has to say

User · Answer

CSS only with a delay of 3s  a few points to take here    multiple animations in one call we create a wait animation that just delays the actual one  the second one in our case     Code   header       animation  3s ease-out 0s 1 wait  0 21s ease-out 3s 1 slideInFromBottom      keyframes wait       from   transform  translateY 20px         to   transform  translateY 20px         keyframes slideInFromBottom     from   transform  translateY 20px   opacity  0      to   transform  translateY 0   opacity  1

User · Answer

Very little Javascript is necessary   window onload   function         document body className      loaded       Now the CSS    fadein       opacity  0      -moz-transition  opacity 1 5s      -webkit-transition  opacity 1 5s      -o-transition  opacity 1 5s      transition  opacity 1 5s     body loaded  fadein       opacity  1      I know the question said  without Javascript   but I think it s worth pointing out that there is an easy solution involving one line of Javascript   It could even be inline Javascript  something like that    lt body onload  document body className      loaded    class  fadein  gt    That s all the JavaScript that s needed

User · Answer

If anyone else had problems doing two transitions at once  here s what I did  I needed text to come from top to bottom on page load   HTML    lt body class  existing-class-name  onload  document body classList add  loaded    gt    HTML    lt div class  image-wrapper  gt       lt img src  db-image jpg  alt  db-image-name  gt       lt span class  text-over-image  gt DB text lt  span gt   lt  div gt    CSS    text-over-image       position  absolute      background-color  rgba 110  186  115  0 8       color   eee      left  0      width  100       padding  10px      opacity  0      bottom  100       -webkit-transition  opacity 2s  bottom 2s      -moz-transition  opacity 2s  bottom 2s      -o-transition  opacity 2s  bottom 2s      transition  opacity 2s  bottom 2s     body loaded  text-over-image       bottom  0      opacity  1      Don t know why I kept trying to use 2 transition declarations in 1 selector and  not really  thinking it would use both

User · Answer

Even simplier solution  still with  one line inline  javascript    Use this as the body tag  Note that body  or this  did not work for me  Only the long   querySelector allow the use of classList remove  Linux Chromium    lt body class  onload  onload  document querySelector  body   classList remove  onload    gt    and add this line on top of your other css rules   body onload    transform  none  important      Take note that this can apply to opacity  as requested by OP  other posters    simply by using opacity as a transition trigger instead   might even work on any other css ruling in the same fashion and you can use multiple class for explicity delay between triggering   The logic is the same  Enforce no transform  with  none  importanton all child element of body onloadand once the document is loaded remove the class to trigger all transition on all elements as specified in your css    FIRST ANSWER BELOW  SEE EDIT ABOVE FOR SHORTER ANSWER   Here is a reverse solution    Make your html layout and set the css accordingly to your final result  with all the transformation you want   Set the transition property to your liking add a class  eg  waitload  to the elements you want to transform AFTER load  The CSS keyword  important is the key word here  Once the document is loaded  use JS to remove the class from the elements to to start transformation  and remove the transition  none override     Works with multiple transition on multiple elements  Did not try cross-browser compatibility    rotated      transform   rotate 90deg     any other transformation         transition  3s     translated      transform   translate 90px     any other transformation         transition  3s     waitload      transform  none  important       lt div id  rotated  class  waitload  gt      rotate after load  lt  div gt   lt div id  translated  class  waitload  gt      trasnlate after load  lt  div gt   lt script type  text javascript  gt          or body onload           document querySelectorAll   waitload             map e   gt  e classList remove  waitload       lt  script gt

User · Answer

Similar to  Rolf s solution  but skip reference to external functions or playing with class   If opacity is to remain fixed to 1 once loaded  simply use inline script to directly change opacity via style   For example   lt body class  fadein  onload  this style opacity 1  gt    where CSS sytle  fadein  is defined per  Rolf defining transition and setting opacity to initial state  i e  0   the only catch is that this does not work with SPAN or DIV elements  since they do not have working onload event

User · Answer

Well  this is a tricky one   The answer is  not really    CSS isn t a functional layer  It doesn t have any awareness of what happens or when  It s used simply to add a presentational layer to different  flags   classes  ids  states    By default  CSS DOM does not provide any kind of  on load  state for CSS to use  If you wanted were able to use JavaScript  you d allocate a class to body or something to activate some CSS   That being said  you can create a hack for that  I ll give an example here  but it may or may not be applicable to your situation   We re operating on the assumption that  close  is  good enough     lt html gt   lt head gt   lt  -- Reference your CSS here    -- gt   lt  head gt   lt body gt       lt  -- A whole bunch of HTML here    -- gt       lt div class  onLoad  gt OMG  I ve loaded   lt  div gt   lt  body gt   lt  html gt    Here s an excerpt of our CSS stylesheet    onLoad       -webkit-animation bounceIn 2s      We re also on the assumption that modern browsers render progressively  so our last element will render last  and so this CSS will be activated last

User · Answer

You could use custom css classes  className  instead of the css tag too  No need for an external package  import React    useState  useEffect   from  react   import   css   from   emotion css   const Hello    props    gt        const  loaded  setLoaded    useState false        useEffect      gt               For load         setTimeout function                  setLoaded true              50      Browser needs some time to change to unload state style             For unload         return      gt                setLoaded false                      props someTrigger       Set your trigger      return            lt div             css                    css                      opacity  0                      transition  opacity 0s                                     loaded  amp  amp                      css                          transition  opacity 2s                          opacity  1                                                 gt              hello          lt  div gt

User · Answer

Not really  as CSS is applied as soon as possible  but the elements might not be drawn yet  You could guess a delay of 1 or 2 seconds  but this won t look right for most people  depending on the speed of their internet   In addition  if you want to fade something in for instance  it would require CSS that hides the content to be delivered  If the user doesn t have CSS3 transitions then they would never see it   I d recommend using jQuery  for ease of use   you may wish to add animation for other UAs  and some JS like this      document  ready function             id to fade in            css   opacity  0        Set to 0 as soon as possible     may result in flicker  but it s not hidden for users with no JS  Googlebot for instance            delay 200               Wait for a bit so the user notices it fade in          css   opacity  1        Fade it back in  Swap css for animate in legacy browsers if required        Along with the transitions added in the CSS  This has the advantage of easily allowing the use of animate instead of the second CSS in legacy browsers if required

User · Answer

start it with hover of body than It will start when the mouse first moves on the screen  which is mostly within a second after arrival  the problem here is that it will reverse when out of the screen   html hover  animateelementid  body hover  animateelementid  rotate         thats the best thing I can think of  http   jsfiddle net faVLX   fullscreen  http   jsfiddle net faVLX embedded result   Edit see comments below  This will not work on any touchscreen device because there is no hover  so the user won t see the content unless they tap it      Rich Bradshaw

User · Answer

Ok I have managed to achieve an animation when the page loads using only css transitions  sort of     I have created 2 css style sheets  the first is how I want the html styled before the animation     and the second is how I want the page to look after the animation has been carried out   I don t fully understand how I have accomplished this but it only works when the two css files  both in the head of my document  are separated by some javascript as follows   I have tested this with Firefox  safari and opera  Sometimes the animation works  sometimes it skips straight to the second css file and sometimes the page appears to be loading but nothing is displayed  perhaps it is just me     lt link media  screen projection  type  text css  href  first-css-file css   rel  stylesheet    gt    lt script language  javascript  type  text javascript  src     js jQuery JavaScript Library v1 3 2 js  gt  lt  script gt    lt script type  text javascript  gt    document  ready function        iOS Hover Event Class Fix if  navigator userAgent match  iPhone i       navigator userAgent match  iPod i       navigator userAgent match  iPad i          container  menu-text   click function        Update class to point at the head of the list            lt  script gt    lt link media  screen projection  type  text css  href  second-css-file css   rel  stylesheet    gt    Here is a link to my work-in-progress website  http   www hankins-design co uk beta2 test index html  Maybe I m wrong but I thought browsers that do not support css transitions should not have any issues as they should skip straight to the second css file without delay or duration   I am interested to know views on how search engine friendly this method is  With my black hat on I suppose I could fill a page with keywords and apply a 9999s delay on its opacity    I would be interested to know how search engines deal with the transition-delay attribute and whether  using the method above  they would even see the links and information on the page   More importantly I would really like to know why this is not consistent each time the page loads and how I can rectify this   I hope this can generate some views and opinions if nothing else

[css] css3 transition animation on load?

Examples related to css

Examples related to webkit

Examples related to css-transitions

Examples related to css-animations