جادوی css3 - انیمیشنها - طراحی سنتی

[tamafi6]

http://barnamenevis.org/attachment.php?attachmentid=126288&d=1417689873

باسلام
یک نمونه زیبابه صورت طراحی های سنتی
کلیه عناصروالمانها توسط css3 نوشته شده
شامل 5 نمای انیمیشن .
کلاسها شامل:
کلاس انیمیشن


animation: start 5s ease-out 1s;

انیمیشن


@keyframes start {
10% {opacity: 1;right:30%; }
90% { opacity: 1; right:30%; }
100% { opacity: 0; right:100%; }
}

تاخیرزمان


h1:nth-child(1) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}

پرسپکتیو- افکت ها-محورها


transform: perspective(400px) rotateX(20deg);
transform-origin: 50% 100%;

سایه برای متن


text-shadow: 0 1px 3px rgba(150,0,0,1),
0 5px 3px rgba(150,0,0,1),
0 10px 3px rgba(150,0,0,1),
0 20px 3px rgba(150,0,0,1),
0 25px 3px rgba(150,0,0,1),
0 30px 3px rgba(150,0,0,1);

سایه برای جعبه


box-shadow: 0 -1.4em 0 0.1em rgba(167,0,0,1),
0 -0.8em 0 0.15em rgba(167,0,0,1),
0 -0.3em 0 0.2em rgba(167,0,0,1),
0 -0.1em 0 0.25em rgba(167,0,0,1),
0 0 0 0.3em rgba(200,0,0,1),
0 0.2em 0 0.35em rgba(200,0,0,0.7),
0 0.4em 0 0.4em rgba(200,0,0,1),
0 0.6em 0 0.45em rgba(167,0,0,0.7),
0 0.8em 0 0.5em rgba(167,0,0,0.7);

وغیره

لینک نمونه (http://pacifist.xzn.ir/myfiles/perspective/)

حتما ازمرورگرهای پیشرفته استفاده شود

دانلوددرضمیمه

[tamafi6]

http://barnamenevis.org/attachment.php?attachmentid=126811&d=1419262865

حتما ببینید
طراحی های سنتی

http://pacifist.xzn.ir/page/files/CSS-Animations/

نمونه دیگر

http://barnamenevis.org/showthread.php?475695-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%87%D8%A7%DB%8C-%D8%B3%D9%86%D8%AA%DB%8C