Smiley face

عنوان : استفاده از انیمیشن کلیدی CSS3 برای ایجاد یک تصویر نوسانی

1396/11/24 - 15:32:26
در این آموزش کوتاه، خواهید دید که ایجاد یک تصویر که به طور پیوسته مانند یک آونگ نوسان مي كند با استفاده از انیمیشن های کلیدی CSS3 آسان است. چنین عوارضی با نشانه ها و تصاویر "تخفیف" محبوب شده است، و توجه دقیق به آنها را جلب می کند.


استفاده از انیمیشن کلیدی CSS3 برای ایجاد یک تصویر نوسانی

در این آموزش کوتاه، خواهید دید که ایجاد یک تصویر که به طور پیوسته مانند یک آونگ نوسان مي كند با استفاده از انیمیشن های کلیدی CSS3 آسان است. چنین عوارضی با نشانه ها و تصاویر "تخفیف" محبوب شده است، و توجه دقیق به آنها را جلب می کند.

 

CSS و کد HTML
کد منبع ارزش یک هزار کلمه است، بنابراین اولا می توانید CSS و HTML را که شامل مثال بالا هستند را بررسی کنید قبل از توضیح اینکه چگونه همه کارها را انجام می دهد:

The CSS:

@-webkit-keyframes swinging{

    0%{-webkit-transform: rotate(10deg);}

    50%{-webkit-transform: rotate(-5deg)}

    100%{-webkit-transform: rotate(10deg);}

}

 

@keyframes swinging{

    0%{transform: rotate(10deg);}

    50%{transform: rotate(-5deg)}

    100%{transform: rotate(10deg);}

}

 

.swingimage{

    -webkit-transform-origin: 50% 0;

    transform-origin: 50% 0;

    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;

    animation: swinging 3.5s ease-in-out forwards infinite;

}

The HTML:

<img class="swingimage" src="wintersale.png" />

قوانين keyframes و نحوه انیمیشن سازی

برای ایجاد انیمیشن نوسانی، یک قانونkeyframes تعریف می کنیم که مشخص می کند چگونه انیمیشن ما در نقاط مختلف باز می شود. نحو برایkeyframes به شرح زیر است:

@keyframes animation-name{

    keyframes-selector: {css styles}

    keyframes-selector: {css styles}

    "

}

در جدول زير مقادير مربوط keyframes@ را مشاهده مي كنيد:

keyframes rule syntax@

Value Description
anmation-name An arbitrary string to identify this @keyframes animation
keyframes-selector

A percentage value (0% to 10%) donating the point in the animation the enclosed styles should be applied at.

You can also use the two keywords "to" and "from" to designate 0% and 100% respectively, for example:

from {background: white;}
to {background: black;}
css styles One or more CSS styles (each separated by a semi colon) specifying the style at this point in the animation.

انیمیشن های Keyframes در IE10 +، FF5 +، Chrome، Opera 12+ و Safari 4+ پشتیبانی می شوند. در این لیست، نسخه های قدیمیتر Chrome و Safari به پیشوندkeyframes برای پیشبرد کار درست نیاز دارند، از این رو دو نسخه از یک تعریف انیمیشنkeyframes همان در مثال بالا ما (@ -webkit-keyframes swinging { } و کلید های کلیدی + نوسان {}).

توجه داشته باشید در پیشوند ها: پیشوند های خاصی از فروشنده وجود دارد که ممکن است لازم باشد قبل از قاعده یا ویژگی CSS3 خود مانند فریم های کلیدی یا انتقال برای پوشش همه پایگاه های خود اضافه کنید. پیشوند های عمده فروشندگان عبارتند از -webkit-، -moz-، -ms-، و -o-. به طور کلی هرچند تنها -webkit- این روزها مورد نیاز است تا مرور مرورگرهای سافاری را که هنوز به شدت به نسخه های پیشفرض خواص CSS3 بستگی دارد، پوشش دهد. مهم این است که CSS خود را در برابر مرورگرهای هدف خود تست کنید تا ببینید آیا اضافه کردن یک پیشوند باعث تفاوت می شود. شما می توانید از یک ابزار مانند autoprefixer برای هوشمندانه افزودن پیشوند های فروشنده به پیش فرض CSS3 قوانین و خواص در CSS استفاده کنید.

هنگامی که انیمیشنkeyframes تعریف شده است، ما از ویژگی انیمیشن انیمیشن CSS برای اشاره به انیمیشن در داخل عنصر CSS یا انتخاب کلاس استفاده می کنیم، مانند:

.swingimage{

    -webkit-transform-origin: 50% 0; /* for Safari and older Chrome */

    transform-origin: 50% 0;

    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;

    animation: swinging 3.5s ease-in-out forwards infinite;

}

در اینجا ما ویژگی انیمیشن را درون کلاس CSS اضافه می کنیم (و سپس کلاس را به عنصر هدف اختصاص می دهیم). خصوصیات انیمیشن برای خواص مرتبط با انیمیشن زیر کوتاه است:

animation shorthand property syntax
property Description
animation-name The @keyframes animation name to be associated with this animation. Defaults to none.
animation-duration The duration (integer) of the animation suffixed with either "s" or "ms" for seconds or milliseconds. Defaults to 0s, which means the animation won't run.
animation-timing-function Sets the timing function used to animate the @keyframe animation. Valid values include "ease", "ease-in", "linear", steps() etc. Defaults to "ease".
animation-delay The delay (integer) before the animation started, suffixed with either "s" or "ms" for seconds or milliseconds. Defaults to 0s.
animation-iteration-count Sets the number of times the animation should run before stopping. A value of "infinite" means forever. Defaults to 1.
animation-direction

Defines whether the animation should play as normal, in reverse, or alternate between the two. Possible values are:

  • normal: The animation plays forward as normal. After each animation cycle, the animation resets to the beginning state and starts over again. Default value.
  • reverse: Plays the animation in reverse, starting from the end state.  After each animation cycle, the animation resets to the end state and starts over again.
  • alternate: The animation alternates between normal and reverse directions. In reverse, the animation starts at the end state and plays backwards. The animation timing function is also reversed.
  • alternate-reverse: The animation alternates between reverse and normal directions, starting in reverse for the first iteration.
animation-fill-mode

Defines how the animation should apply styles to its target when the animation isn't playing anymore. Possible values are:

  • none: The animation should not apply any styles to the target when it is not playing. Default value.
  • forwards: The target element will retain the computed styles defined in the last keyframe (ie: when keyframe is at 100%) when the animation isn't playing.
  • backwards: The target element will retain the computed styles defined in the first keyframe (ie: when keyframe is at 0%) when the animation isn't playing.
  • both: The target element will retain the computed styles defined in both the first and last keyframes when the animation isn't playing.
animation-play-state Defines whether the animation is initially playing or not. Possible values are "running" or "paused". Defaults to "running".

 

در داخل خصوصيت انتزاعی انیمیشن، اگر ارزش خصوصيت خاصی حذف شود، مقدار پیش فرض آن مورد استفاده قرار خواهد گرفت. علاوه بر این، منظور از هر مقدار ارزش در داخل انیمیشن به طور کلی مهم نیست، به استثنای خواص مرتبط با دو زمان (مدت زمان انیمیشن و تاخیر انیمیشن) - اگر هر دو تعریف شده، مدت زمان انیمیشن همیشه باید تاخیر انیمیشن .


بازبینی CSS برای تصویر نوسانی ما
در CSS ما برای ایجاد یک تصویر نوسانی، ما برای کلاس "swingimage" ما تعریف کرده ایم:

.swingimage{

    -webkit-transform-origin: 50% 0;

    transform-origin: 50% 0;

    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;

    animation: swinging 3.5s ease-in-out forwards infinite;

}

در اینجا می توانید ببینید که ویژگی ملایم انیمیشن داریم:

animation: swinging 3.5s ease-in-out forwards infinite;

به این معنا، ما می خواهیم که انیمیشن های keyframe نوسان برای هر دوره به مدت 3.5 ثانیه اجرا شوند، با استفاده از عملکرد زمان بندی سهولت در سهولت، و برای عنصر هدف برای حفظ آخرین سبک های Keyframe بعد. با استفاده از عنصر هدف که در انتهای چرخه آخرین سبک های کلیدی نگهداری می شود، وقتی یک چرخه بعد شروع می شود، یک انتقال بدون درز بین سبک های اصلی و اصلی کلید ایجاد می شود. و حداقل به آخر، ما می خواهیم این انیمیشن برای تعداد محدودی از چرخه اجرا شود.

در حال حاضر اجازه می دهیم توجه ما را به اموال مبدا تبدیل در کلاس CSS متمرکز کنیم. این منشا x-offset و y-offset را که در آن هر گونه تغییرات مربوط به CSS اتفاق می افتد انجام می دهد، که در تصویر نوسان ما چرخش تصویر خواهد بود. در تصویر آزمایشی بالا، "لولای" که در آن چرخش باید از آن منشا گرفته شود دقیقا میانه به صورت افقی در داخل تصویر است و در سمت راست به صورت عمودی:

wintersalediagram

به همین دلیل است که مقدا خصوصيات ما دارای موارد ذیل است:

transform-origin: 50% 0;

یک تصویر متفاوت را در نظر بگیرید:

salediagram

تصاوير بيشتر را مي توانيد دراينجا بيابيد.

در این مورد، ما می خواهیم مقادیر تبدیل مبدا را 35٪ به صورت افقی تنظیم کنیم:

transform-origin: 35% 0;

خصوصيتمبدأ تبدیل از مقدار طولی صریح (به عنوان مثال: px) یا درصد به عنوان واحد خود پشتیبانی می کند، بنابراین حتی اگر دقیق تر باشد، می توانید 77px را برای مقدار x offset بجای 35٪ در اینجا بنویسید.

نمايش دمو

1396/11/24 - 15:32:26
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي