23‏/10‏/2016

Unknown

الأنيمشين بإستخدام CSS3 - Animation Examples CSS3

السلام عليكم ورحمة الله

Animation Examples CSS3 

Animation Examples CSS3 - دروس4يو Dros4U
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

مع تطور تقنيات الويب، جاءت تقنية css3 مكملة لما ظهر عليه 

أهم المميزات التي تمتعت بها تقنية css3 : 

1. Animations and Transitions
قدمت لنا CSS3 خاصية جديدة وهي الحركات والأنميشين، بحيث يمكن للأشياء أن تتفاعل مع المستخدم، بدل استخدام flash وهي أسرع وأفضل وأسهل.

2. Gradients
كخاصية جديدة أخرى أتت وهي إضافة التدرجات، والتي يمكن إضافتها بكود بسيط بدل صنع صورة خاصة ووضعها.

3. Webfonts
خاصية أخرى وهي إدراج خطوط خاصة، ففي النسخ السابقة كان المصمم يلتزم بخطوط المتصفح المملة، أو حتى إدراج صور بدل بعض الكتابات، اما الآن فيمكن إضافة الخطوط وبسهولة عبر @font-face.

4. Border Images
وهي تسمح لك بإضافة صورة كمثابة إطار للعناصر، بدل الإطار الخطي.

5. Multiple Backgrounds
وهي تسمح لك بإضافة أكثر من خلفية لنفس العنصر، لتحكم أفضل وأسهل.


سنعرض في هذا المقال أمثلة ونماذج تستخدم الحركة بتقنية Css3

Pure CSS Switch Day and Night (Fox version)

Css Experiment with a click Hack event to turn lights on and off.

Animation Examples CSS3 - دروس4يو Dros4U

CSS Loading Image

A beautiful honey comb style loader for your website design. This concept is slick for loading images and pages.

Animation Examples CSS3 - دروس4يو Dros4U


CSS Loader

A loader css3 with compass.

Animation Examples CSS3 - دروس4يو Dros4U
Source


Bounce css3 animation

Made with css radial gradients.

Animation Examples CSS3 - دروس4يو Dros4U
Source

Css3 loader

A small and clean css 3 loader for your website.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Amazing Smooth CSS3 Pulse

Easy job for sass+bourbon.

Animation Examples CSS3 - دروس4يو Dros4U

Source


CSS Loading Animation

Animation Examples CSS3 - دروس4يو Dros4U
Source



Ghost Animation

A floating ghost.

Animation Examples CSS3 - دروس4يو Dros4U
Source



CSS Map Notification

Map notification shows beautiful with with css snippet.

Animation Examples CSS3 - دروس4يو Dros4U
Source


CSS3 Lamp Switch

Turn on the lights.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Mozilla DevDerby Animation

Small CSS3 animation project done by Mircea Piţurcă for Mozilla DevDerby competition.

Animation Examples CSS3 - دروس4يو Dros4U
Source

Sunshine loader

A clean flat loader doen with modern css style-sheet.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Pixelated Progress Bar

A nice pixelated progress loading of any uploads.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Animated Progress Bar

Free UI elements and widgets coded with HTML5, CSS3, and Sass.

Animation Examples CSS3 - دروس4يو Dros4U
Source


CSS 3 progress bar

Only one element used to make this progress bar.

Animation Examples CSS3 - دروس4يو Dros4U

Source



Simple Blog Responsive

A showcase of simple blog which is responsive. The code snippet is also pasted.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Css3 Animation

An amazing snippet done on CSS3.
Animation Examples CSS3 - دروس4يو Dros4U
Source



Responsive Horizontal Drop-Down Menu

A beautiful responsive drop down menu which looks great.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Cooking Bootstrap Icons

These icons are totally pure css snippets.

Animation Examples CSS3 - دروس4يو Dros4U
Source



CSS3 Image blur

CSS blur isn’t great, especially for images. But eventually they’ll be super rad.

Animation Examples CSS3 - دروس4يو Dros4U
Source



CSS3 Checkbox Styles

A few different check-box styles.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Pure CSS3 Hexicons

Hexagon CSS3 buttons. Resizable and maintains aspect ratios.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Flat Responsive Form using CSS3 & HTML5

Flat Responsive Form using CSS3 & HTML5 with image background.

Animation Examples CSS3 - دروس4يو Dros4U
Source



Simple, CSS only, responsive menu

Pure CSS menu.

Animation Examples CSS3 - دروس4يو Dros4U
Source



A Responsive Menu

Testing out Slim + Stylus while creating a responsive menu.

Animation Examples CSS3 - دروس4يو Dros4U
Source



CSS Responsive Devices

Watch the laptop turn into mobile when resized. Animated responsive devices: Thunderbolt > MacBook Pro > iPad > iPhone. This was created to use in the header of my website. Enjoy!

Animation Examples CSS3 - دروس4يو Dros4U
Source



CSS3 Responsive Navigation Menu

Pure Css responsive menu with dropdowns and transition effects.

Animation Examples CSS3 - دروس4يو Dros4U

Source



Pure CSS Responsive Accordion Table

Responsive CSS table, that turns into an accordion menu on small screens. Change Radio inputs to Checkboxes to expand multiple sections.

Animation Examples CSS3 - دروس4يو Dros4U

Source



Responsive flat webbrowser

Good for portfolios, galleries or anything else.

Animation Examples CSS3 - دروس4يو Dros4U
Source



التعليقآت