انیمیشن شماره ۱

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Some-SVG-animation-keyframes.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="WmEyeM" default_tab="html,result" user="andrejsharapov"]See the Pen <a href='https://codepen.io/andrejsharapov/pen/WmEyeM'>Some SVG animation &amp; keyframes</a> by Andrej Sharapov (<a href='https://codepen.io/andrejsharapov'>@andrejsharapov</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۲

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Animated-Sticker-HTML-CSS.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="xMLBaZ" default_tab="css,result" user="ycw"]See the Pen <a href='https://codepen.io/ycw/pen/xMLBaZ'>Sticker</a> by ycw (<a href='https://codepen.io/ycw'>@ycw</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۳

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Rock-Animation-HTML-CSS.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="BvzNGv" default_tab="css,result" user="srekoble"]See the Pen <a href='https://codepen.io/srekoble/pen/BvzNGv'>ROCK ?</a> by Vangel Tzo (<a href='https://codepen.io/srekoble'>@srekoble</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۴

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/H2O-Chemical-Flask-Animation-HTML-CSS.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="xmZXEq" default_tab="html,result" user="ekaterina_vasilyeva"]See the Pen <a href='https://codepen.io/ekaterina_vasilyeva/pen/xmZXEq'>H2O - chemical flask (animation)</a> by Ekaterina Vasilyeva (<a href='https://codepen.io/ekaterina_vasilyeva'>@ekaterina_vasilyeva</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۵

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Pure-CSS-Submarine-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="gQwJPJ" default_tab="css,result" user="akhil_001"]See the Pen <a href='https://codepen.io/akhil_001/pen/gQwJPJ'>Submarine Animation (Pure CSS)</a> by Akhil Sai Ram (<a href='https://codepen.io/akhil_001'>@akhil_001</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۶

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Candles-Pure-CSS-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="mzNQoM" default_tab="css,result" user="akhil_001"]See the Pen <a href='https://codepen.io/akhil_001/pen/mzNQoM'>Candles (Pure CSS Animation)</a> by Akhil Sai Ram (<a href='https://codepen.io/akhil_001'>@akhil_001</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۷

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Whale-And-The-Moon-HTML-CSS-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="BqdgRR" default_tab="css,result" user="aswinbehera"]See the Pen <a href='https://codepen.io/aswinbehera/pen/BqdgRR'>Whale and the Moon</a> by Aswin Behera (<a href='https://codepen.io/aswinbehera'>@aswinbehera</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۸

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/CSS-Cassette-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="qMVYXL" default_tab="css,result" user="banik"]See the Pen <a href='https://codepen.io/banik/pen/qMVYXL'>CSS Cassette</a> by Tony Banik (<a href='https://codepen.io/banik'>@banik</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۹

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Coffee-Machine-Pure-CSS-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="jvyJdX" default_tab="css,result" user="hjdesigner"]See the Pen <a href='https://codepen.io/hjdesigner/pen/jvyJdX'>Coffee Machine Pure CSS Animation</a> by Henrique Rodrigues (<a href='https://codepen.io/hjdesigner'>@hjdesigner</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشن شماره ۱۰

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/Solar-Eclipse-Animation-HTML-CSS.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="vzyJJQ" default_tab="css,result" user="aris_acoba"]See the Pen <a href='https://codepen.io/aris_acoba/pen/vzyJJQ'>solar eclipse</a> by Aris Acoba (<a href='https://codepen.io/aris_acoba'>@aris_acoba</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]  

انیمیشه شماره ۱۱

[video width="960" height="540" mp4="http://dayancs.ir/wp-content/uploads/2019/11/CSS-Box-Dog-Animation.mp4"][/video] [codepen_embed height="265" theme_id="dark" slug_hash="eLOKvr" default_tab="css,result" user="agathaco"]See the Pen <a href='https://codepen.io/agathaco/pen/eLOKvr'>CSS Box Dog</a> by agathaco (<a href='https://codepen.io/agathaco'>@agathaco</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]">
               
استدیو خلاقیت دایان
               
دنیای شیرین وب دولوپمنت

۱۱ نمونه انیمیشن ساخته شده با css به همراه کد

یک کالکشن رایگان از انیمیشن های ساخته شده با css/html

انیمیشن شماره ۱

See the Pen Some SVG animation & keyframes by Andrej Sharapov (@andrejsharapov) on CodePen.dark

 

انیمیشن شماره ۲

See the Pen Sticker by ycw (@ycw) on CodePen.dark

 

انیمیشن شماره ۳

See the Pen ROCK ? by Vangel Tzo (@srekoble) on CodePen.dark

 

انیمیشن شماره ۴

See the Pen H2O – chemical flask (animation) by Ekaterina Vasilyeva (@ekaterina_vasilyeva) on CodePen.dark

 

انیمیشن شماره ۵

See the Pen Submarine Animation (Pure CSS) by Akhil Sai Ram (@akhil_001) on CodePen.dark

 

انیمیشن شماره ۶

See the Pen Candles (Pure CSS Animation) by Akhil Sai Ram (@akhil_001) on CodePen.dark

 

انیمیشن شماره ۷

See the Pen Whale and the Moon by Aswin Behera (@aswinbehera) on CodePen.dark

 

انیمیشن شماره ۸

See the Pen CSS Cassette by Tony Banik (@banik) on CodePen.dark

 

انیمیشن شماره ۹

See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen.dark

 

انیمیشن شماره ۱۰

See the Pen solar eclipse by Aris Acoba (@aris_acoba) on CodePen.dark

 

انیمیشه شماره ۱۱

See the Pen CSS Box Dog by agathaco (@agathaco) on CodePen.dark

کلمات کلیدی :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نکته آموزشی

<title> مهمترین بخش یک صفحه وبسایت است که عنوان محتویات صفحه را نمایش میگذارید .
تگ عنوان تنها میتواند بین ۶۰ تا ۸۰ کاراکتر باشد . پس در انتخاب عنوان مطالب دقت کنید که در کنار رساندن موضوع کوتاه یا خیلی بلند نباشند.

DevChat