    -webkit-transition : -webkit-filter 500ms linear

works in webkit. I don&#39;t know about filter support in FF or Opera.


I&#39;m not sure I wholly understand your question.




That&#39;s what I&#39;m using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn&#39;t hurt to keep both.

    -webkit-transition: 1s -webkit-filter linear;
    -moz-transition: 1s -moz-filter linear;
    -moz-transition: 1s filter linear;
    -ms-transition: 1s -ms-filter linear;
    -o-transition: 1s -o-filter linear;
    transition: 1s filter linear, 1s -webkit-filter linear;

On last versions of Chrome which support `transition` without `-webkit-` prefix, if you are using `transition-property` (no shorthand `transition`) and properties like `filter` which still needs `-webkit-` prefix you need to mix unprefixed and prefixed code:

	transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

Note that the `filter` property is repeted with `-webkit-filter`. This is needed for browsers which do not use prefix, like Firefox, which in that case `-webkit-filter` is ignored.

Check if you have different values in the filter properties:

WRONG

    .link-image {
        transition: 0.3s;
        filter: brightness(80%);
    }

    .link-image:hover {
        transition: 0.3s;
        filter: brightness(10);
    }

CORRECT

    .link-image {
        transition: 0.3s;
        filter: brightness(80%);
    }

    .link-image:hover {
        transition: 0.3s;
        filter: brightness(100%);
    }



Is there a difference between the functions `fitted()` and `predict()`?  I&#39;ve noticed that mixed models from lme4 work with `fitted()` but not `predict()`.

Is there a difference between the R functions fitted() and predict()?

I want to remove **test.extra** from all of my file names in current directory 
 
    for filename in *.fasta;do 

        echo $filename | sed \e &#39;s/test.extra//g&#39;

    done

but it complains about not founding file.echo is to be sure it list correctly. 

Removing part of a filename for multiple files on Linux

I&#39;m trying to animate CSS filters but can&#39;t find any information on the correct transition properties. What are they?

Here&#39;s an example: http://jsbin.com/onijim/3/

Is there an animatable transition-property for css filters?

<p>I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they?</p>
<p>Here's an example: <a href="http://jsbin.com/onijim/3/" target="_blank" rel="noopener noreferrer">http://jsbin.com/onijim/3/</a></p>


Is there a good technique to make a resizable split pane in HTML?

May it be done using CSS / jQuery / JavaScript or is there a good JavaScript library that have been used?

(An example of a split pane is the favorites bar in [Internet&amp;nbsp;Explorer][1] which you may have docked to the left of your main browser window.)

  [1]: https://en.wikipedia.org/wiki/Internet_Explorer





Best way to do a split pane in HTML

I&#39;m using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table. 

I played around with it and I think the problem has to do with the text being unspaced. I created a [jsfiddle][1] that demonstrates what I mean.

As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up &quot;under&quot; its sibling. 

Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line? ` `

  [1]: http://jsfiddle.net/skhFC/2/

Bootstrap tables overflowing with long unspaced text

When the text is **without spaces**  and **more than the div size 200px** it&#39;s flowing out 
The width is defined as 200px
I have put my code here http://jsfiddle.net/madhu131313/UJ6zG/
You can see the below pictures 
**edited**: I want the the text to go to the next line

![enter image description here][1]

![enter image description here][2]


  [1]: http://i.stack.imgur.com/5Qt2K.png
  [2]: http://i.stack.imgur.com/8ysmC.png

text flowing out of div

I want to remove the Blue glow of the textbox and the border, but i don&#39;t know how to override any of the js or the css of it, check [Here][1]

**EDIT 1**

I want to do this because i am using the jquery plugin [Tag-it][2] and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd


  [1]: http://jsfiddle.net/fadykamal/pE5mQ/62/
  [2]: http://aehlke.github.com/tag-it/

Override twitter bootstrap Textbox Glow and Shadows

I am blurring some images with this code

    img {
      filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
    }

The edges of the image get blurred too though. Is it possible to blur the image, while keeping the edges defined? Like an inset blur or something?

Defined Edges With CSS3 Filter Blur

I&#39;m using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done. 

Fiddle: [http://jsfiddle.net/russelluresti/UeNFK/][1]

I also noticed that this does not occur on my headers, which have the `-webkit-font-smoothing: antialiased` property/value pair on them. So, I&#39;m wondering, is there any way to have the text maintain its default look (the &quot;auto&quot; value for font-smoothing) and not alter rendering during a transition.

I&#39;ve tried explicitly setting the text to use the &quot;auto&quot; value, but that doesn&#39;t do anything. I should also note that setting font-smoothing to &quot;none&quot; also prevents the rendering blink during transition.

Any help is appreciated.

**Edit 1**

I should note that I am on OS X. While looking at my test in Chrome on Parallels, I did not see the two different paragraphs behaving differently, so this may be an issue exclusive to Macs.

  [1]: http://jsfiddle.net/russelluresti/UeNFK/

How to prevent Webkit text rendering change during CSS transition

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page. 

When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to `display:none` the div doesn&#39;t slide in at all. 

How do I have a div not take up space until it is timed to come in (using CSS for the timing.)

I am using Animate.css for the animations.

Here is what the code looks like: 


    &lt;div id=&quot;main-div&quot; class=&quot;animated fadeInDownBig&quot;&gt;&lt;!-- Content --&gt;&lt;/div&gt;

    &lt;div id=&quot;div1&quot;&gt;&lt;!-- Content --&gt;&lt;/div&gt;
    &lt;div id=&quot;div2&quot;&gt;&lt;!-- Content --&gt;&lt;/div&gt;
    &lt;div id=&quot;div3&quot;&gt;&lt;!-- Content --&gt;&lt;/div&gt;

As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set: 

	#main-div{
	   -moz-animation-delay: 3.5s;
       -webkit-animation-delay: 3.5s;
       -o-animation-delay: 3.5s;
        animation-delay: 3.5s;
	}

It is at that point that I would like the main div to push the other divs down as it comes in. 

How do I do this?

Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled. 

***EDIT***

I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn&#39;t work. Here is the code: 

***HTML*** 

    &lt;div id=&quot;main-div&quot; class=&quot;animated fadeInDownBig&quot;&gt;&lt;!-- Content --&gt;&lt;/div&gt;

***CSS***

	#main-image{
		height: 0;
  		overflow: hidden;
	   -moz-animation-delay: 3.5s;
       -webkit-animation-delay: 3.5s;
       -o-animation-delay: 3.5s;
        animation-delay: 3.5s;
	}
	#main-image.fadeInDownBig{
		height: 375px;
	}

CSS Animation and Display None

I&#39;ve started using transitions to &quot;modernise&quot; the feel of a site. So far, `:hover` transitions are working great. Now I&#39;m wondering if it&#39;s possible to trigger a transition based on other things, such as when a class changes.

Here&#39;s the relevant CSS:

    #myelem {
        opacity: 0;
        display: none;
        transition: opacity 0.4s ease-in, display 0.4s step-end;
        -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
        -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
        -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
    }
    #myelem.show {
        display: block;
        opacity: 1;
        transition: opacity 0.4s ease-out, display 0.4s step-start;
        -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
        -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
        -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
    }

The JavaScript to trigger the change is:

    document.getElementById(&#39;myelem&#39;).className = &quot;show&quot;;

But the transition doesn&#39;t seem to be happening - it&#39;s just jumping from one state to the other.

What am I doing wrong?

CSS transition from `display: none` on class change?

I have a website, and I decided to replace the jquery based toggle boxes with pure CSS snippets. When I use fixed height value for the transition (last lines of the CSS), it works well, but with the `auto` value, the animation is missing, only the height change has an effect!

Is there a way to use this with auto value? I would like to use variable texts and no scripts.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .ac-container{
      width: 400px;
      margin: 10px auto 30px auto;
      text-align: left;
    }
    .ac-container label{
      font-family: &#39;BebasNeueRegular&#39;, &#39;Arial Narrow&#39;, Arial, sans-serif;
      padding: 5px 20px;
      position: relative;
      z-index: 20;
      display: block;
      height: 30px;
      cursor: pointer;
      color: #777;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
      line-height: 33px;
      font-size: 19px;
      background: #ffffff;
      background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
      background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
      background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
      background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
      background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#ffffff&#39;, endColorstr=&#39;#eaeaea&#39;,GradientType=0 );
      box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
    }
    .ac-container label:hover{
      background: #fff;
    }
    .ac-container input:checked + label,
    .ac-container input:checked + label:hover{
      background: #c6e1ec;
      color: #3d7489;
      text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
      box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
    }

    .ac-container input{
      display: none;
    }
    .ac-container section{
      background: rgba(255, 255, 255, 0.5);
      margin-top: -1px;
      overflow: hidden;
      height: 0px;
      position: relative;
      z-index: 10;
      -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
      -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
      -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
      -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
      transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    }
    .ac-container section p{
      font-style: italic;
      color: #777;
      line-height: 23px;
      font-size: 14px;
      padding: 20px;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    }
    .ac-container input:checked ~ section{
      -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
      -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
      -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
      -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
      transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
      box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
    }
    .ac-container input:checked ~ section.ac-small{
      height: 120px; /*auto*/
    }




&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;ac-container&quot;&gt;
      &lt;div&gt;

        &lt;input id=&quot;ac-1&quot; name=&quot;accordion-1&quot; type=&quot;checkbox&quot; /&gt;
        &lt;section class=&quot;ac-small&quot;&gt;
          &lt;p&gt;Some content... &lt;/p&gt;
        &lt;/section&gt;
        &lt;label for=&quot;ac-1&quot;&gt;About us&lt;/label&gt;

      &lt;/div&gt;	

      &lt;div&gt;	
        &lt;input id=&quot;ac-2&quot; name=&quot;accordion-2&quot; type=&quot;checkbox&quot; /&gt;
        &lt;section class=&quot;ac-small&quot;&gt;
          &lt;p&gt;Some content... &lt;/p&gt;
        &lt;/section&gt;
        &lt;label for=&quot;ac-2&quot;&gt;About us&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;



CSS transition auto height not working

I&#39;m having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (`margin:0 auto;`). The bug is still there if you remove the transition as well.

You can see it happening here:  

http://jsfiddle.net/MfUMd/1/

HTML:

    &lt;div class=&quot;wrap&quot;&gt;
        &lt;img src=&quot;https://github.com/favicon.ico&quot; class=&quot;target&quot; alt=&quot;img&quot;/&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;div class=&quot;block&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS:

    .wrap {
        margin:50px auto;
        width: 100px;
    }
    .block {
        width:30px;
        height:30px;
        background:black;
    }
    .target,.block {
        display:block;
        -webkit-transition: all 0.4s ease;
    	-moz-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
    }
    .target:hover,.block:hover {
    	-webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg); 
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);  
    }

Comment out the `margin:0 auto;` line to make it go away.

Anyone have any ideas of how to stop this while keeping the page centered?

I&#39;m using Version 24.0.1312.57 on OSX 10.6.8

Cheers

Content Type	Original Author	Original Content on Stackoverflow
Question	0skar	View Question on Stackoverflow
Solution 1 - Css	mddw	View Answer on Stackoverflow
Solution 2 - Css	Karl Adler	View Answer on Stackoverflow
Solution 3 - Css	AxeEffect	View Answer on Stackoverflow
Solution 4 - Css	ze_castro	View Answer on Stackoverflow

Is there an animatable transition-property for css filters?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Removing part of a filename for multiple files on Linux

Is there a difference between the R functions fitted() and predict()?

Attributions