افکت های Transition در CSS3 و استفاده در طراحی سایت

امروز درطراحی وب سایت,زبانCSS3بسیاری از کارهایی که قبلا انجام داده مشده است که بسیار سخت و ناممکن بود را میتوانید از این پس انجام دهیم و بسیاری از کارهای جالب و حتی شگف انگیز امروزه بسیار راحت انجام میپذیرد.

امروز و در اینمقالهاز سری مقاله های طراحیوب سایتکه در مجموعه اطلس وب برای طراحان و برنامه نویس هایوب سایتتهیه و تدوین شده است,قصد داریم تا شما را با چند افکت بسیار سادهtransitionآشنا نماییم که میتواند قابلیت های وب سایت شما را افزایش دهد و کاربرانوبسایتشما را راضی و خشنود نماید.

امروزه استفاده و پشتیبانی از این افکت ها بسیار ساده تر شده است و هم اکنون شما میتوانید در طراحی های خود از آن ها استفاده نمایید.

امروز قصد داریم تا 8 افکتی که با خصوصیتtransitionساخته میشود را به شما معرفی نماییم.

در ابتدا یک تگdivبا خصوصیت های مشترک برای کار خود در نظر میگیریم.

<html>
<head>
    <style type="text/css">style>
head>
<body>
    <div>div>       
body>
html>

<style type="text/css">
body > div
{
            width:483px;
            height:298px;
            background:#676470;
            transition:all 0.3s ease;
}
style>

1- افکت FADE IN

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

2- افکت CHANGE COLOR

.color:hover
{
        background:#53a7ea;
}

3- افکت GROW amp; SHRINK

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

4- افکت ROTATE ELEMENT

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

5- افکت SQUARE TO CIRCLE

.circle:hover
{
        border-radius:50%;
}

6- افکت 3D SHADOW

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

7- افکت SWING

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

8- افکت INSET BORDER

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}