Applying Webkit Transitions to Pseudo Elements

Applying WebKit transitions to Pseudo Elements

This is a webkit bug, transitions do not work in Chrome or Safari on pseudo-elements.

Please star this bug to hopefully help the ball get rolling on a fix:

Issue 54699: CSS3 transition not applied for pseudo elements

It has been reported to Webkit:

Bug 23209 - Transitions and animations do not apply to CSS generated content

so hopefully it will be fixed soon.

UPDATE: Support for transitions was added to Webkit on 01/02/2013: https://trac.webkit.org/changeset/138632

Applying WebKit transitions to Pseudo Elements

This is a webkit bug, transitions do not work in Chrome or Safari on pseudo-elements.

Please star this bug to hopefully help the ball get rolling on a fix:

Issue 54699: CSS3 transition not applied for pseudo elements

It has been reported to Webkit:

Bug 23209 - Transitions and animations do not apply to CSS generated content

so hopefully it will be fixed soon.

UPDATE: Support for transitions was added to Webkit on 01/02/2013: https://trac.webkit.org/changeset/138632

CSS Transitions with :before and :after pseudo elements

Fixed in Google Chrome on January 3rd, 2013.

By now (I do update this list) it's supported in:

• FireFox 4.0 and above
• Chrome 26 and above
• IE 10 and above

Waiting for Safari and Chrome for Android to pull these updates.

You can test it yourself in your browser, or

See the browser support table.

Using CSS transition on ::before pseudo element

On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this

.posts .img-hover:before {
    content: '';
    display: block;
    background: url("img/Texture1.png");
    width: 320px; /* image width */
    height: 220px; /* image height */
    position: absolute;
    top: 13px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition:  opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
    opacity: 1;
}

CSS animation of pseudo element works in Chrome and IE, but is stationary in Safari and Firefox without position: absolute

http://jsfiddle.net/3j5u8w77/54/

icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
    height: 30px;
    display:inline-block;
}

.parent {
    position: relative;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

I guess a partial solution. If you use display: inline-block on the pseudo element safari can animate the 'O' just fine without the "position:absolute". As for the off centre spin in firefox if I explicitly set the height to 30px to make sure that firefox knows how big the 'O' is exactly so the rotation is dead centre. But this changes the way that safari rotates the 'O' so this leads me to believe that the 'O' is being seen as different sizes in different browsers due to the way browsers render fonts. Perhaps explicitly set a size for this element and set an exact transform-origin property to ensure the rotation is always centred

Transition doesn't work on pseudo-element

Two main issues here. First, you're adding a transition the the anchor element, not it's "::before" pseudo-element. Secondly, you're setting no inital state for the pseudo-element, you're setting everything on hover. If you want to transition you need an initial state and an end state. For example:

.wrap {
    margin-top: 50px;
    a {
        position: relative;
        display: inline-block;

        &::before{
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            -o-transition: all 1s;
            -ms-transition: all 1s;
            transition: all 1s;
            content: '';
            border: 0 solid #ffffff;
            opacity: 0;
            width: 90px;
            height: 90px;
            position: absolute;
            left: 0;
            top: 0;
        }

        &:hover {
            &::before {
                border: 7px solid #ffffff;
                opacity: .7;
            }
        }

    }
}

Notice the transition is on the pseudo element, and I've set the initial values for the inital state for this element (opacity: 0 + border: 0)

CSS3 Transition on pseudo element (::before) does not work

The problem is that the pseudo-element doesn't exist when the container isn't being hovered:

.flexContainerBox:hover::before { 
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 0%);
}

You should move some of these styles to the .flexContainerBox::before styles (where you have the transition styles):

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

To not animate the centering of the arrow (translate(-50%, ...)), you can add this:

-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

Also, there's a small typo:

transform: translate(-50%, 0%);

becomes

transform: translate(-50%, 100%);

Result

.flexContainer {

  display: flex;

  flex-direction: row;

}

.flexContainerBox {

  flex: 1;

  border-top: 20px solid transparent;

  position: relative;

  padding: 50px;

  font-family: "Open Sans Bold";

}

.flexContainerBoxBorderRight {

  border-right: 1px solid #ccc;

  position: absolute;

  top: 10%;

  bottom: 10%;

  right: 0;

}

.flexContainerBox1 {

  border-top-color: #15AF04;

  color: #15AF04

}

.flexContainerBox2 {

  border-top-color: #ffd470;

  color: #ffd470;

}

.flexContainerBox3 {

  border-top-color: #1b63b1;

  color: #1b63b1;

}

.flexContainerBox4 {

  border-top-color: #dd0000;

  color: #dd0000;

}

.flexContainerBox::before {

  content: '';

  position: absolute;

  border: 15px solid transparent;

  border-bottom: 0;

  position: absolute;

  left: 50%;

  top: 0;

  -moz-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  -webkit-transition: all 1.5s ease-in-out;

  -moz-transition: all 1.5s ease-in-out;

  -ms-transition: all 1.5s ease-in-out;

  -o-transition: all 1.5s ease-in-out;

  transition: all 1.5s ease-in-out;

}

.flexContainerBox:hover::before {

  -moz-transform: translate(-50%, 100%);

  -ms-transform: translate(-50%, 100%);

  -webkit-transform: translate(-50%, 100%);

  transform: translate(-50%, 100%);

}

.flexContainerBox1:hover::before {

  border-top-color: #15AF04;

}

.flexContainerBox2:hover::before {

  border-top-color: #ffd470;

}

.flexContainerBox3:hover::before {

  border-top-color: #1b63b1;

}

.flexContainerBox4:hover::before {

  border-top-color: #dd0000;

}

<div class="indexContainer whiteContainer flexContainer">

  <div class="flexContainerBox flexContainerBox1">

    <div class="flexContainerBoxBorderRight"></div>

    <div class="flexContainerBoxHeading">

      WORLD CLASS <span style="color:#111">FACILITIES</span>

    </div>

    <div class="flexContainerBoxTextBox">

      <ul>

        <li>Day & Boarding</li>

        <li>Secondary & Primary</li>

        <li>Ages 2 to 18</li>

        <li>200 Students </li>

        <li>Cambridge IGCSE & GCEs</li>

        <li>Beautiful sports facilities</li>

      </ul>

    </div>

  </div>

  <div class="flexContainerBox flexContainerBox2">

    <div class="flexContainerBoxBorderRight"></div>

    <div class="flexContainerBoxHeading">

      QUALITY <span style="color:#111">EDUCATION</span>

    </div>

    <div class="flexContainerBoxTextBox">

      <ul>

        <li>Over 10 Years Experience in Quality delivery</li>

        <li>Good resources for Students</li>

        <li>Student Oriented Learning</li>

        <li>Good Teaching staff </li>

        <li>Conducive Environment</li>

      </ul>

    </div>

  </div>

  <div class="flexContainerBox flexContainerBox3">

    <div class="flexContainerBoxBorderRight"></div>

    <div class="flexContainerBoxHeading">

      PERSONAL <span style="color:#111">TOUCH</span>

    </div>

    <div class="flexContainerBoxTextBox">

      <ul>

        <li>Small Class Sizes</li>

        <li>Low teacher:student Ratio</li>

        <li>Maximum contact with teachers</li>

        <li>Mentorship programs</li>

        <li>Student Counselling</li>

      </ul>

    </div>

  </div>

  <div class="flexContainerBox flexContainerBox4">

    <div class="flexContainerBoxBorderRight"></div>

    <div class="flexContainerBoxHeading">

      HOLISTIC <span style="color:#111">APPROACH</span>

    </div>

    <div class="flexContainerBoxTextBox">

      <ul>

        <li>Innovative Teaching Methods</li>

        <li>Use of Technology in learning</li>

        <li>Developing the "whole" child</li>

        <li>Nurturing Talents & Gifts</li>

        <li>Extra-curricular program</li>

        <li>Christ-Centered School</li>

      </ul>

    </div>

  </div>

  <div class="clear"></div>

</div>

CSS3 transitions on pseudo-elements (:after, :before) not working?

WebKit (Chrome, Safari) does not support transitions on pseudo elements.

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

It should work in Firefox.

Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.

---

Related Topics