CSS Border Animation Experiment for Tutorialzine

Used in the FrameWarp tutorial.

by martinaglv

HTML

<a href="#">Animate!</a>
<div id="animated"></div>

<div id="note">
    <p>Notes:</p>
    <ul>
        <li>Left border is blue</li>
        <li>Right border is green</li>
        <li>Top border is white</li>
    </ul>
</div>

CSS

body{
    background-color:#888;
    color:#eee;
    font:12px sans-serif;
}

#animated{
    position:fixed;
    top:20px;
    left:50%;
    margin-left:-35px;
    margin-top:85px;
    
    width: 0;
    height: 0;
    border:0px solid transparent;
    border-top-color:#fff;
    border-width:0 35px;
    border-left-color:blue;
    border-right-color:green;
    
    -webkit-transition:all 4s;
    -moz-transition:all 4s;
    transition:all 4s;
}

#animated.start{
    width:200px;
    margin-left:-100px;
    margin-top:10px;
    border-left-width:0;
    border-right-width:0;
    border-top-width:150px;
}

a{
    position:absolute;
    top:10px;
    left:10px;
    font-size:16px;
    font-weight:bold;
    color:#fff;
}

#note{
    position:absolute;
    bottom:10px;
    left:10px;
}

p{
    font-weight:bold;
}

JavaScript

$('a').click(function(){
    $('#animated').toggleClass('start')
});