• افکت bounce در CSS
    #1
    Note 
    سلام
    معذرت بابت کم شدن فعالیت دارم روی یه پروژه کار میکنم نمیتونم زیاد بیام :blushsmiley:

    این همون افکتیه که در دکمه اپلود سنتر استفاده شده براتون گذاشتم تا استفاده کنید چون افکت جالبیه با تشکر از مدیر انجمن :73:

    [CSS]

    @-webkit-keyframes bounce {
    0% { -webkit-transform: scale(1.03); }
    10% { -webkit-transform: scale(1.02); }
    20% { -webkit-transform: scale(1.0); }
    30% { -webkit-transform: scale(1.2); }
    40% { -webkit-transform: scale(1.0); }
    50% { -webkit-transform: scale(1.1); }
    60% { -webkit-transform: scale(1.0); }
    70% { -webkit-transform: scale(1.05);}
    80% { -webkit-transform: scale(1.0); }
    90% { -webkit-transform: scale(1.02);}
    100% { -webkit-transform: scale(1.0); }
    }
    @-webkit-keyframes bounceh {
    0% { -webkit-transform: scale(1.0); }
    10% { -webkit-transform: scale(1.02); }
    20% { -webkit-transform: scale(1.0); }
    30% { -webkit-transform: scale(1.2); }
    40% { -webkit-transform: scale(1.0); }
    50% { -webkit-transform: scale(1.1); }
    60% { -webkit-transform: scale(1.0); }
    70% { -webkit-transform: scale(1.05);}
    80% { -webkit-transform: scale(1.0); }
    90% { -webkit-transform: scale(1.02);}
    100% { -webkit-transform: scale(1.03); }
    }
    @-moz-keyframes bounce {
    0% { -moz-transform: scale(1.09); }
    10% { -moz-transform: scale(1.02); }
    20% { -moz-transform: scale(1.0); }
    30% { -moz-transform: scale(1.2); }
    40% { -moz-transform: scale(1.0); }
    50% { -moz-transform: scale(1.1); }
    60% { -moz-transform: scale(1.0); }
    70% { -moz-transform: scale(1.05);}
    80% { -moz-transform: scale(1.0); }
    90% { -moz-transform: scale(1.02);}
    100% { -moz-transform: scale(1.0); }
    }
    @-moz-keyframes bounceh {
    0% { -moz-transform: scale(1.0); }
    10% { -moz-transform: scale(1.02); }
    20% { -moz-transform: scale(1.0); }
    30% { -moz-transform: scale(1.2); }
    40% { -moz-transform: scale(1.0); }
    50% { -moz-transform: scale(1.1); }
    60% { -moz-transform: scale(1.0); }
    70% { -moz-transform: scale(1.05);}
    80% { -moz-transform: scale(1.0); }
    90% { -moz-transform: scale(1.02);}
    100% { -moz-transform: scale(1.04); }
    }
    @keyframes bounce {
    0% { transform: scale(1.04); }
    10% { transform: scale(1.02); }
    20% { transform: scale(1.0); }
    30% { transform: scale(1.2); }
    40% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    60% { transform: scale(1.0); }
    70% { transform: scale(1.05);}
    80% { transform: scale(1.0); }
    90% { transform: scale(1.02);}
    100% { transform: scale(1.0); }
    }
    @keyframes bounceh {
    0% { transform: scale(1.0); }
    10% { transform: scale(1.02); }
    20% { transform: scale(1.0); }
    30% { transform: scale(1.2); }
    40% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    60% { transform: scale(1.0); }
    70% { transform: scale(1.05);}
    80% { transform: scale(1.0); }
    90% { transform: scale(1.02);}
    100% { transform: scale(1.03); }
    }

    [/CSS]

    استفاده: حالت عادی

    [CSS]

    .buttons {
    -webkit-animation: bounce 0.8s ease-in-out;
    -moz-animation: bounce 0.8s ease-in-out;
    animation: bounce 0.8s ease-in-out;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    transition: 0.4s ease;
    }
    [/CSS]

    استفاده: حالت hover

    [CSS]
    .buttons:hover {
    -webkit-animation: bounceh 0.8s ease-in-out;
    -moz-animation: bounceh 0.8s ease-in-out;
    animation: bounceh 0.8s ease-in-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    transition: 0.4s ease;
    }
    [/CSS]

    مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
    پاسخ
    #2
    Note 
    عالیه :flower:
    _________
    شهادت امام جعفر صادق رو تسلیت میگم

    پاسخ
    #3
    Note 
    20 20 عالی

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان