CODEWITHSUNDEEP
javascriptextjscss
CDelaney
CDelaney

Reputation: 1248

Fade a css border to invisible?

Is it possible to fade an element's border away? To clarify, this needs to be triggered from javascript, and using something like jquery for animation is NOT an option. We're using sencha but it doesn't look like you can animate anything but element size and position with extjs. I know css3 has some handy animation, but I can't find anything similar to my needs.

Upvotes: 7

Views: 19688

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

Something like this ?

div.transition {
  border: 5px solid rgba(0,0,0,1);
  height: 100px;
  width: 100px;
  background-color: #ffffff;

  -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
     -moz-transition: border-color 1s linear; /* FF3.7+ */
       -o-transition: border-color 1s linear; /* Opera 10.5 */
          transition: border-color 1s linear;
}

div.transition:hover {
  border-color: rgba(0,0,0,0);
}

Demo at http://jsfiddle.net/gaby/bcn5c/1/

Upvotes: 22

sabel
sabel

Reputation: 546

Keep in mind that transitions don't work in Opera (11.62) if you just write border-color. You have to specify all four borders separately:

-o-transition: border-top-color 1s linear, border-right-color 1s linear, border-bottom-color 1s linear, border-left-color 1s linear;

http://jsfiddle.net/ds5bM/

This is fixed in Opera 12.

Upvotes: 2

Tules
Tules

Reputation: 4915

just use CSS3 transitions

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

Upvotes: 0

Related Questions