Javascript ASK: html – How do I add a CSS class to an element from CSS (not jquery nor javascript)?

Tuesday, July 31, 2012

html – How do I add a CSS class to an element from CSS (not jquery nor javascript)?

I want for all images on my webpage to have CSS class \”fadeIn\” so that when when they first appear, they will fade into view. (I\’m using CSS animations to do the fadeIn. Later, I use jquery to add and remove the class.)

I\’d normal make an img element and use myImg.addClass(\"fadeIn\") but the element is made deep within the code of Google Maps and I don\’t have access to element. It\’s also uncertain when the img element will actually be created.

Something like this, in CSS:


img {
   height: 100;
   width: 50;
   AddClassToThisElement: \"fadeIn\"  ***
}

Is something like this possible?

Edit: The actual CSS that I had was:


  img[src^=\"da\"] {
    -webkit-animation-name: fadeInFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

  .fadeOut {
    -webkit-animation-name: fadeOutFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

The former was more specific so adding class fadeOut to elements didn\’t work. By changing .fadeOut to img[src^=\"da\"].fadeOut, the latter is now more specific and adding fadeOut to the element works.

Rating: 2 out of 5 based on 3 ratings