CSS transition

2013-07-13

Bevezetés a CSS3 animáció világába. Micsoda megváltás lesz, ha mindenki HTML5 + CSS3 támogató böngészőt fog végre használni 🙂

A lenti forráskód néhány helyen eltér attól amit a videóban írtam. Utólag vettem észre, hogy néhány helyen lehet még rajta tömöríteni.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<html>
<head>
    <meta charset="utf-8"/>
    <title>CSS transition</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <section id="wrapper">
        <h1>CSS3 transition</h1>
        <div class="box effect-1">
            <img src="1.png" alt=""/>
            <div>elso</div>
        </div>
        <div class="box effect-2">
            <img src="2.png" alt=""/>
            <div>masodik</div>
        </div>
        <div class="box effect-3">
            <img src="3.png" alt=""/>
            <div>harmadik</div>
        </div>
        <div class="box effect-4">
            <img src="4.png" alt=""/>
            <div>negyedik</div>
        </div>
    </section>
</body>
</html>

CSS forráskód


* { margin: 0; padding: 0; border: 0 }
body {
    font: 18px 'Lucida Sans Unicode';
    color: #fff;
    background: #f6f6f6;
    background: linear-gradient(to bottom,  #f5f6f6 0%,#c4c4c4 100%) fixed
}
section#wrapper {
    width: 1000px;
    margin: 100px auto 0 auto;
}
h1 {
    font-size: 50px;
    color: #707070;
    text-align: center
}
div.box {
    width: 200px;
    height: 200px;
    float: left;
    margin: 50px 20px 0 20px;
    border: 5px solid #fff;
    border-radius: 105px;
    overflow: hidden;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
    position: relative
}
div.box img { border-radius: 100px }
div.box div {
    width: 200px;
    height: 105px;
    background: #000;
    text-align: center;
    border-radius: 100px;
    padding: 95px 0 0 0
}
div.effect-1 div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 500ms;
}
div.effect-1 div:hover { opacity: 0.8 }

div.effect-2 img {
    position: absolute;
    top: 0;
    left: 0;
    transition: margin-left 800ms
}
div.effect-2:hover img { margin-left: 200px }

div.effect-3 div {
    position: absolute;
    opacity: .8;
    top: 0;
    left: 0;
    margin-left: -200px;
    transition: margin-left 500ms
}
div.effect-3:hover div { margin-left: 0 }

div.effect-4 img {
    position: absolute;
    top: 0;
    left: 0
}
div.effect-4 div {
    opacity: .8;
    transform: scale(0);
    transition-duration: 500ms;
    -webkit-transform: scale(0)
}
div.effect-4:hover div {
    transform: scale(1);
    -webkit-transform: scale(1)
}