How to prevent text style defaults during CSS transition


Tags: css,css-transitions

Problem :

DEMO HERE

How do I prevent the text weight form changing to bolder during the transition? The end result both ways is fine, but during the transition, the text gets bolder. This happens with the elements after the element hovered. E.g. if you hover the second event on the timeline, the first one is not affected but the second itself and the third are.

HTML

<div class="timeline">
    <ol>
        <li>
            <span class="date">Week 1</span>Event 1
        </li>
        <li>
            <span class="date">Week 2</span>Event 2
        </li>
        <li>
            <span class="date">Week 3</span>Event 3
        </li>
    </ol>
</div>

CSS

ol {
    position: relative;
    display: block;
    margin: 100px;
    margin-top: 150px;
    height: 4px;
    background: #24ad9e;
}
ol::after {
    content: "";
    position: absolute;
    top: -8px;
    display: block;
    width: 0;
    height: 0;
    border-radius: 5px;
    border: 10px solid #24ad9e;
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #24ad9e;
    border-radius: 3px;
}
.timeline ol li {
    position: relative;
    top: -76px;
    left:-50px;
    display: inline-block;
    float: left;
    width: 150px;   
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font: 14px "Lato" Helvetica Arial;
}
.timeline ol li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -29px;
    display: block;
    width: 6px;
    height: 6px;
    border: 4px solid #24ad9e;
    background: #fff;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.date {
    color: #000;
    display: block; 
    margin-top: -17px;
}

/* Hover effects */

.timeline ol li:hover {
    cursor: pointer;
    color: #28e;
}
.timeline ol li:hover::before {
    /*top: 1px;
    left: -29px;
    width: 6px;
    height: 6px;*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* transitions */
.timeline ol li::before, .timeline ol li:hover::before {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;


Solution :

Use CSS backface-visibility property to solve this problem. Refer to this Link


    CSS Howto..

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to CSS: select element based on inner HTML

    How often is the default font size in the browser not 16px?

    How to make a custom clickable shape with CSS to cover the exact needed area?

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How to make images go inline vs break to a new line?

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    How to make text and icons black in sticky header?

    CSS: How to style text in a box with a limited height

    How do I join my list and div using css?

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    How to wrap table cell at a maximum width in full width table

    How do I push inline elements onto the next line

    How to style sets of labels and fields in a form with pure CSS and get proper alignment?

    How to embed a custom bitmap font into website using CSS

    How to enable CDN CSS in Brackets, Chrome?

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    How to change the width of css tab according to length of alphabet?

    jQuery how to select children first level div's

    How do I control the height of the main content area no matter how much text is in there?

    How to recalculate css vw and vh values after resizing?

    How fix labels placement so them not overlap in DevExpress js chart?

    How do you maintain CSS layout when adding content (ASP.NET)

    How to cancel a too-broad CSS color declaration in a later stylesheet?

    How do I scale the size of the elements in my HTML according to screen size?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    How to make text float on top of an image html css

    How to NOT trigger hover effect on table row when hovering over specific element inside it

    How to prevent from loading a css and a js sheet at only one Rails controller?

    css show separator icon for icons