/ تاپیک جامع CSS Animation در ویکی وی بی
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 5 از 5

موضوع: تاپیک جامع CSS Animation در ویکی وی بی

  1. #1
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir

    تاپیک جامع CSS Animation در ویکی وی بی

    سلام دوستان عزیز !

    درا ین تاپیک بهترین و پرطرفدارترین سی اس اس انمیشن ها قرار می گیره و سعی میشه روزانه حداقل یک سی اس اس انمیشن قرار بگیره !

    به عنوان اولین سی اس اس انمیشن :

    سی اس اس انمیشن Hinge

    کد های زیر داخل کد های سی اس اس اضافه کنید :

    کد:
    @-webkit-keyframes hinge {      0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }      20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }      40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }      80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }      100% { -webkit-transform: translateY(700px); opacity: 0; }  }  @keyframes hinge {      0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }      20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }      40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }      80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }      100% { transform: translateY(700px); opacity: 0; }  }


    این کد هارو هم داخل هاور کلاس یا ای دی خود قرار بدید :

    کد:
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both;
        -webkit-animation-name: hinge; 
        animation-name: hinge;
    اینم دمو آنلاین :

    http://jsfiddle.net/cS94A/


    خب دوستان این تاپیک بسته میشه سوالی بود به بنده پ.خ بدید !

    روزانه آپدت می شود .

    - - - Updated - - -

    سی اس اس انمیشن Wobble

    کد های زیر داخل کد های سی اس اس اضافه کنید :

    کد:
    @-webkit-keyframes wobble { 
      0% { -webkit-transform: translateX(0%); } 
      15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 
      30% { -webkit-transform: translateX(20%) rotate(3deg); } 
      45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 
      60% { -webkit-transform: translateX(10%) rotate(2deg); } 
      75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 
      100% { -webkit-transform: translateX(0%); } 
    } 
    @keyframes wobble { 
      0% { transform: translateX(0%); } 
      15% { transform: translateX(-25%) rotate(-5deg); } 
      30% { transform: translateX(20%) rotate(3deg); } 
      45% { transform: translateX(-15%) rotate(-3deg); } 
      60% { transform: translateX(10%) rotate(2deg); } 
      75% { transform: translateX(-5%) rotate(-1deg); } 
      100% { transform: translateX(0%); } 
    }

    این کد هارو هم داخل هاور کلاس یا ای دی خود قرار بدید :

    کد:
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both; 
        -webkit-animation-name: wobble; 
        animation-name: wobble;
    اینم دمو آنلاین :

    http://jsfiddle.net/vN7Le/

    16 نفر از اعضا پست The Ph@ntom را پسندیده اند


    ویرایش توسط The Ph@ntom : 07-25-2014 در ساعت 01:11 PM
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

  2. نوين وردپرس تبلیغات شما

  3. #2
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir
    دوستان دمو آنلاین هم قرار گرفت !

    3 نفر از اعضا پست The Ph@ntom را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

  4. #3
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir

    سی اس اس انمیشن RollOut

    کد های زیر داخل کد های سی اس اس اضافه کنید :

    کد:
    @-webkit-keyframes rollOut { 
        0% { 
            opacity: 1; 
            -webkit-transform: translateX(0px) rotate(0deg); 
        } 
        100% { 
            opacity: 0; 
            -webkit-transform: translateX(100%) rotate(120deg); 
        } 
    } 
    @keyframes rollOut { 
        0% { 
            opacity: 1; 
            transform: translateX(0px) rotate(0deg); 
        } 
        100% { 
            opacity: 0; 
            transform: translateX(100%) rotate(120deg); 
        } 
    }
    این کد هارو هم داخل هاور کلاس یا ای دی خود قرار بدید :

    کد:
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both; 
        -webkit-animation-name: rollOut; 
        animation-name: rollOut;

    اینم دمو آنلاین :

    http://jsfiddle.net/6qthP/1/

    5 نفر از اعضا پست The Ph@ntom را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

  5. #4
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir

    سی اس اس انمیشن Tada

    کد های زیر داخل کد های سی اس اس اضافه کنید :

    کد:
    @-webkit-keyframes tada { 
        0% {-webkit-transform: scale(1);} 
        10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
        30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
        40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
        100% {-webkit-transform: scale(1) rotate(0);} 
    } 
    @keyframes tada { 
        0% {transform: scale(1);} 
        10%, 20% {transform: scale(0.9) rotate(-3deg);} 
        30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
        40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
        100% {transform: scale(1) rotate(0);} 
    }

    این کد هارو هم داخل هاور کلاس یا ای دی خود قرار بدید :

    کد:
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both; 
        -webkit-animation-name: tada; 
        animation-name: tada;

    دمو آنلاین :

    http://jsfiddle.net/84aok5xa/

    4 نفر از اعضا پست The Ph@ntom را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

  6. #5
    The Ph@ntom آنلاین نیست.
    The Ph@ntom
    مدير بازنشسته
    1,982نوشته4,397مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    4
    پسندیده است
    2,480 پست
    بلاگ
    2 پست
    میزان امتیاز
    4344
    vatangraphic.ir

    سی اس اس انمیشن Flip

    کد های زیر داخل کد های سی اس اس اضافه کنید :


    کد:
    @-webkit-keyframes flip {      0% {          -webkit-transform: perspective(400px) rotateY(0);          -webkit-animation-timing-function: ease-out;      }      40% {          -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);          -webkit-animation-timing-function: ease-out;      }      50% {          -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);          -webkit-animation-timing-function: ease-in;      }      80% {          -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);     
        }      100% {          -webkit-transform: perspective(400px) scale(1);          -webkit-animation-timing-function: ease-in;      }  }  @keyframes flip {      0% {          transform: perspective(400px) rotateY(0);          animation-timing-function: ease-out;      }      40% {          transform: perspective(400px) translateZ(150px) rotateY(170deg);          animation-timing-function: ease-out;      }      50% {          transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);          animation-timing-function: ease-in;      }      80% {          transform: perspective(400px) rotateY(360deg) scale(.95);          animation-timing-function: ease-in;      }      100% {          transform: perspective(400px) scale(1);          animation-timing-function: ease-in;      }  }

    این کد هارو هم داخل هاور کلاس یا ای دی خود قرار بدید :

    کد:
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both;  
        -webkit-backface-visibility: visible !important; 
        -webkit-animation-name: flip; 
        backface-visibility: visible !important; 
        animation-name: flip;


    دمو آنلاین :

    http://jsfiddle.net/4j14kbgo/

    2 نفر از اعضا پست The Ph@ntom را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    Coming Soon ... ! New Style

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی