بخش مقالات آکادمی | Articles
آخرین آموزش ها

چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت اول )

سی اس اس ( CSS: Cascading Style Sheets ) در کنار اچ تی ام ال (HTML) هستهٔ فناوری ساخت صفحه های وب هستند. سی اس اس روشی ساده برای نمایش چیدمان و جلوه های تصویری (مانند نوع قلم، رنگ و اندازه ها) بر صفحه های وب است. در اینجا ما به شما چند انیمیشن که برای برنامه نویس ها و طراحان وب می تواند بسیار مفید و جالب و جذاب باشد را نشان می دهیم. با این حال این مجموعه در بسیاری از چیزهایی که شما می توانید با CSS تحرک را ایجاد کنید تمرکز دارد و خلاقیت شما برای ایجاد انیمیشن با CSS نیز چند پله بالاتر می برد. پس با ما همراه باشید در چند انیمیشن جالب با CSS که شما باید ببینید.

برای درج CSS در یک سند HTML از یکی از سه روش زیر میتوان بهره گرفت:

  • شیوه نامهٔ خارجی

در این روش برای اتصال یک سند CSS که با پسوند .css شناخته می شود، از تگ <link> در قسمت <head> استفاده میشود. مثال :

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”/>

</head>

  • شیوه نامهٔ داخلی

شیوهنامهٔ داخلی در قسمت <head> در سند اچ تی ام ال، با استفاده از تگ <style> معین میگردد. مانند زیر:

<head>

<style type=”text/css”>

hr {color:sienna;}

p {margin-left:20px;}

</style>

</head>

  • شیوه نامهٔ درون خطی

در این روش مشخصات شیوه نامهٔ در تگ مربوطه ذکر میشود. مانند زیر:

<head>

<style type=”text/css”>

hr {color:sienna;}

p {margin-left:20px;}

</style>

</head>

  • شیوه نامهٔ درون خطی

در این روش مشخصات شیوه نامهٔ در تگ مربوطه ذکر میشود. مانند زیر:

<p style=”color:sienna;margin-left:20px”>این بندی جدید است.</p>

ما در اینجا کد های مربوط به انیمیشن ها را در اختیار شما قرار می دهیم و شما می توانید با استفاده از سایت codepen.io کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.

۱. انیمیشن در حال بارگذاری

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

برای دیدن این انیمیشن اینجا را کلیک کنید.

کد HTML

<“div class=”container>

  <div class=”ball”></div>

  <div class=”ball”></div>

  <div class=”ball”></div>

  <div class=”ball”></div>

  <div class=”ball”></div>

  <div class=”ball”></div>

  <div class=”ball”></div>

</div>

 کد css

body {
margin: 0;
padding: 0;
background: #191f27;
}

.container {
width: 200px;
height: 100px;
padding-top: 100px;
margin: 0 auto;
}

.ball {
width: 10px;
height: 10px;
margin: 10px auto;
border-radius: 50px;
}
.ball:nth-child(1) {
background: #ff005d;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}

.ball:nth-child(2) {
background: #35ff99;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
background: #008597;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
background: #ffcc00;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
background: #2d3443;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animation: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
background: #ff7c35;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
background: #4d407c;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}

@-webkit-keyframes right {
0% { -webkit-transform: translate(-15px); }
50% { -webkit-transform: translate(15px); }
100% { -webkit-transform: translate(-15px); }
}

@-webkit-keyframes left {
0% { -webkit-transform: translate(15px); }
50% { -webkit-transform: translate(-15px); }
100% { -webkit-transform: translate(15px); }
}

@-moz-keyframes right {
0% { -moz-transform: translate(-15px); }
50% { -moz-transform: translate(15px); }
100% { -moz-transform: translate(-15px); }
}

@-moz-keyframes left {
0% { -moz-transform: translate(15px); }
50% { -moz-transform: translate(-15px); }
100% { -moz-transform: translate(15px); }
}

@keyframes right {
0% { transform: translate(-15px); }
50% { transform: translate(15px); }
100% { transform: translate(-15px); }
}

@keyframes left {
0% { transform: translate(15px); }
50% { transform: translate(-15px); }
100% { transform: translate(15px); }
}

۲.کد Clo clo

این هم یک جالب دیگر !!!

برای دیدن این انیمیشن اینجا را کلیک کنید.

کد html

<div class=”cuadro”>
<div class=”gallina”>
<div class=”cuello”></div>

<ul class=”cresta”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<div class=”pico”><div>
<div class=”pico3″></div>
<div class=”cuerpo”>
<ul class=”plumas”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class=”cola”></div>
<div class=”cola3″></div>
<div class=”patas3″></div>
<div class=”patas”></span></div>
</div>
</div>

کد css

.cuadro{
position:relative;
width:100%;
height:650px;
background:#4e83b4;
margin: 0 auto;
padding-top:30px;
}
.gallina{
width:50%;
height:650px;
display:block;
position:relative;

margin: -3px auto;}

.cuello{
position:absolute;
border-bottom:212px solid #aaaa96;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
height: 0;
margin: 132px 430px;

width: 55px;
-webkit-animation: mover .5s alternate infinite ;
-moz-animation: mover .5s alternate infinite ;
animation: mover .5s alternate infinite ;
}
.cuello::before{
content:””;
display:block;
border-bottom:142px solid #baba93;
border-left: 21px solid transparent;
border-right: 14px solid transparent;
height: 0;
width: 30px;
margin: 50px 7px;
}
.cuello::after{
content:””;
display:block;
width:35px;
height:21px;
border-radius:30px 30px 0 0;
background:#baba93;
margin:-199px 26px;
}
ul.cresta{
position:absolute;
width: 121px;
height: 90px;
list-style:none;
display:blocK;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 102px 375px;
-webkit-animation: mover3 .5s alternate infinite ;
-moz-animation: mover3 .5s alternate infinite ;
animation: mover3 .5s alternate infinite ;

}
ul.cresta li{
display:inline-block;
background:#c52541;
width:19px;
height:70px;
border-radius: 12px 12px 0px 0px;
margin-left: -5px;

}
ul.cresta li:nth-child(1){
height:30px;
border-radius: 12px 12px 0px 12px;
}
ul.cresta li:nth-child(2){
height: 40px;
}
ul.cresta li:nth-child(3){
height:50px;
}
ul.cresta li:nth-child(4){
height: 60px;
}
ul.cresta li:nth-child(5){
border-radius: 12px 12px 12px 0px;
}
.pico{
position:absolute;
width: 0;
height: 0;
border-bottom: 21px solid #ffcf55;
border-right: 30px solid transparent;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
margin: 162px 505px;
-webkit-animation: abre 1s alternate infinite ;
-moz-animation: abre 1s alternate infinite ;
animation: abre 1s alternate infinite ;
}

.pico::before{
content:””;
display:block;
width: 0;
height: 0;
border-bottom: 21px solid #ffcf55;
border-left: 30px solid transparent;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
margin: 21px 0px;
-webkit-animation: abre3 1s alternate infinite ;
-moz-animation: abre3 1s alternate infinite ;
animation: abre3 1s alternate infinite ;
}

.pico:after{
content:””;
display:block;

width:16px;
height:4px;
border-radius: 0 12px 12px 0px;
background:#fa948a;
margin: -46px -12px;
-webkit-animation: sale 1s alternate infinite ;
-moz-animation: sale 1s alternate infinite ;
animation: sale 1s alternate infinite ;

}
.pico3{
position:absolute;
width: 25px;
height:50px;
border-radius: 30px 0 0 30px;
background:#c52541;
margin: -67px -16px;

}
.pico3:before{
content:””;
display:block;
width:17px;
height:50px;
border-radius:0 0 12px 12px;
background:#c52541;

margin:30px 4px;

}

.cuerpo{
position:absolute;
width:212px;
height:121px;
border-radius:0 0 212px 212px;
background:#383851;
margin: 83px -217px;
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
-ms-transform: rotate(9deg);
-o-transform: rotate(9deg);
transform: rotate(9deg);
-webkit-animation: sube .2s alternate infinite ;
-moz-animation: sube .2s alternate infinite ;
animation: sube .2s alternate infinite ;

z-index:3;
}
.cuerpo::before{
content:””;
display:block;

width:172px;
height:90px;
border-radius:0 0 212px 212px;
background:#3c3c55;
margin: 0px 30px;

}
.cuerpo::after{
content:””;
display:block;

width:102px;
height:60px;
border-radius:0 0 212px 212px;
background:#414159;
margin: -90px 90px;

}

ul.plumas{
position:absolute;
width: 100%;
height: 90px;
list-style:none;
display:blocK;
margin: -108px 63px;

}
ul.plumas li{
display:inline-block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 21px solid #383851;
margin-left: -7px;
}
.cola{
position:absolute;
width: 112px;
height:55px;
background:#34344d;
border-radius: 112px 112px 0 0;

margin: 30px -300px;

}

.cola::before{
content:””;
display:block;
width: 112px;
height:55px;
background:#4d4961;
border-radius: 112px 112px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

margin: -30px 30px;

}

.cola::after{
content:””;
display:block;
width: 112px;
height:55px;
background:#34344d;;
border-radius: 112px 112px 0 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

margin: -60px 65px;

}
.cola3{
position:absolute;
width: 60px;
height:30px;
background:#383851;
border-radius: 112px 112px 0 0;

margin: 50px -271px;

}

.cola3::before{
content:””;
display:block;
width: 60px;
height:30px;
background:#555569;

border-radius: 112px 112px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

margin: -47px 0px;

}

.cola3::after{
content:””;
display:block;
width: 60px;
height:30px;
background:#383851;
border-radius: 112px 112px 0 0;

margin: 37px 50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

}
.patas{
position:absolute;
width:50px;
height:50px;
background:#2c2c45;
border-radius: 50px 30px 21px 30px;
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
margin: 152px -142px;
-webkit-animation: camina3 .5s alternate infinite ;
-moz-animation: camina3 .5s alternate infinite ;
animation: camina3 .5s alternate infinite ;
z-index:3;

}

.patas:before{
content:””;
display:block;
width:9px;
height:50px;
background:#ffae24;
webkit-transform: rotate(121deg);
-moz-transform: rotate(121deg);
-ms-transform: rotate(121deg);
-o-transform: rotate(121deg);
transform: rotate(121deg);
margin: 34px 65px;
}

.patas:after{
content:””;
display:block;
width:45px;
height:9px;
background:#ffae24;
webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
-ms-transform: rotate(-21deg);
-o-transform: rotate(-21deg);
transform: rotate(-21deg);
-webkit-animation: camina7 .5s alternate infinite ;
-moz-animation: camina7 .5s alternate infinite ;
animation: camina7 .5s alternate infinite ;
margin: -53px 75px;

}
.patas3{
position:absolute;
width:50px;
height:53px;
background:#2c2c45;
border-radius: 50px 30px 21px 30px;
-webkit-transform: rotate(112deg);
-moz-transform: rotate(112deg);
-ms-transform: rotate(112deg);
-o-transform: rotate(112deg);
transform: rotate(112deg);
margin:152px -132px;
-webkit-animation: camina .5s alternate infinite ;
-moz-animation: camina .5s alternate infinite ;
animation: camina .5s alternate infinite ;

}

.patas3:before{
content:””;
display:block;
width:9px;
height:60px;
background:#ffae24;
webkit-transform: rotate(121deg);
-moz-transform: rotate(121deg);
-ms-transform: rotate(121deg);
-o-transform: rotate(121deg);
transform: rotate(121deg);
margin:33px 70px;
}

.patas3:after{
content:””;
display:block;
width:45px;
height:9px;
background:#ffae24;
webkit-transform: rotate(-99deg);
-moz-transform: rotate(-99deg);
-ms-transform: rotate(-99deg);
-o-transform: rotate(-99deg);
transform: rotate(-99deg);
-webkit-animation: camina6 .5s alternate infinite ;
-moz-animation: camina6 .5s alternate infinite ;
animation: camina6 .5s alternate infinite ;
margin: -60px 79px;
}

@-webkit-keyframes mover{
0% {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
50% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
}
@keyframes mover{
0% {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

100% {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
}
@-moz-keyframes mover{
0% {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

100% {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
}
@-webkit-keyframes mover3{
0% {
-webkit-transform: rotate(-48deg);
-moz-transform: rotate(-48deg);
-ms-transform: rotate(-48deg);
-o-transform: rotate(-48deg);
transform: rotate(-48deg);
}

50% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
transform: rotate(-42deg);
}

}

@keyframes mover3{
0% {
-webkit-transform: rotate(-48deg);
-moz-transform: rotate(-48deg);
-ms-transform: rotate(-48deg);
-o-transform: rotate(-48deg);
transform: rotate(-48deg);
}

50% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
transform: rotate(-42deg);
}

}
@-moz-keyframes mover3{
0% {
-webkit-transform: rotate(-48deg);
-moz-transform: rotate(-48deg);
-ms-transform: rotate(-48deg);
-o-transform: rotate(-48deg);
transform: rotate(-48deg);
}

50% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
transform: rotate(-42deg);
}

}

@-webkit-keyframes sube{
0% {
margin-top:86px;
}

50% {
margin-top:83px;
}
100% {
margin-top:80px;
}

}

@keyframes sube{
0% {
margin-top:86px;
}

50% {
margin-top:83px;
}
100% {
margin-top:80px;
}

}
@-moz-keyframes sube{
0% {
margin-top:86px;
}

50% {
margin-top:83px;
}
100% {
margin-top:80px;
}

}

@-webkit-keyframes abre {
0% {
margin-top:164px;
}

50% {
margin-top:164px;
}
100% {
margin-top:160px;
}

}

@keyframes abre{
0% {
margin-top:164px;
}

50% {
margin-top:164px;
}
100% {
margin-top:162px;
}

}
@-moz-keyframes abre{
0% {
margin-top:164px;
}

50% {
margin-top:164px;
}
100% {
margin-top:162px;
}

}
@-webkit-keyframes abre3 {
0% {
margin-top:25px;
}

50% {
margin-top:25px;
}
100% {
margin-top:21px;
}

}
@keyframes abre3 {
0% {
margin-top:25px;
}

50% {
margin-top:25px;
}
100% {
margin-top:21px;
}

}

@-moz-keyframes abre3{
0% {
margin-top:25px;
}

50% {
margin-top:25px;
}
100% {
margin-top:21px;
}
}

@-webkit-keyframes camina{
0% {
-webkit-transform: rotate(112deg);
-moz-transform: rotate(112deg);
-ms-transform: rotate(112deg);
-o-transform: rotate(112deg);
transform: rotate(112deg);
}

100% {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

}
@keyframes camina {
0% {
-webkit-transform: rotate(112deg);
-moz-transform: rotate(112deg);
-ms-transform: rotate(112deg);
-o-transform: rotate(112deg);
transform: rotate(112deg);
}

100% {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

}

@-moz-keyframes camina {
100% {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

}

@keyframes camina6{
0% {
webkit-transform: rotate(-99deg);
-moz-transform: rotate(-99deg);
-ms-transform: rotate(-99deg);
-o-transform: rotate(-99deg);
transform: rotate(-99deg);
margin-left:77px;
margin-top:-60px;
}

100% {
-webkit-transform: rotate(-19deg);
-moz-transform: rotate(-19deg);
-ms-transform: rotate(-19deg);
-o-transform: rotate(-19deg);
transform: rotate(-19deg);
margin-left:80px;
margin-top:-53px;
}

}
@-webkit-keyframes camina6{
0% {
webkit-transform: rotate(-99deg);
-moz-transform: rotate(-99deg);
-ms-transform: rotate(-99deg);
-o-transform: rotate(-99deg);
transform: rotate(-99deg);
margin-left:77px;
margin-top:-60px;
}

100% {
-webkit-transform: rotate(-19deg);
-moz-transform: rotate(-19deg);
-ms-transform: rotate(-19deg);
-o-transform: rotate(-19deg);
transform: rotate(-19deg);
margin-left:80px;
margin-top:-53px;
}

}

@-moz-keyframes camina6{
0% {
webkit-transform: rotate(-99deg);
-moz-transform: rotate(-99deg);
-ms-transform: rotate(-99deg);
-o-transform: rotate(-99deg);
transform: rotate(-99deg);
margin-left:77px;
margin-top:-60px;
}

100% {
-webkit-transform: rotate(-19deg);
-moz-transform: rotate(-19deg);
-ms-transform: rotate(-19deg);
-o-transform: rotate(-19deg);
transform: rotate(-19deg);
margin-left:80px;
margin-top:-53px;
}

}

@-webkit-keyframes camina3 {
0% {
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
}

100% {
-webkit-transform: rotate(93deg);
-moz-transform: rotate(93deg);
-ms-transform: rotate(93deg);
-o-transform: rotate(93deg);
transform: rotate(93deg);
}

}

@keyframes camina3 {
0% {
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
}

100% {
-webkit-transform: rotate(93deg);
-moz-transform: rotate(93deg);
-ms-transform: rotate(93deg);
-o-transform: rotate(93deg);
transform: rotate(93deg);
}

}
@-moz-keyframes camina3 {
0% {
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
}

100% {
-webkit-transform: rotate(93deg);
-moz-transform: rotate(93deg);
-ms-transform: rotate(93deg);
-o-transform: rotate(93deg);
transform: rotate(93deg);
}

}
@-webkit-keyframes camina7{
0%{
webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
-ms-transform: rotate(-21deg);
-o-transform: rotate(-21deg);
transform: rotate(-21deg);
margin: -53px 75px;
}

100% {
-webkit-transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-ms-transform: rotate(-75deg);
-o-transform: rotate(-75deg);
transform: rotate(-75deg);
margin: -59px 75px;

}
}
@keyframes camina7{
0%{
webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
-ms-transform: rotate(-21deg);
-o-transform: rotate(-21deg);
transform: rotate(-21deg);
margin: -53px 75px;
}

100% {
-webkit-transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-ms-transform: rotate(-75deg);
-o-transform: rotate(-75deg);
transform: rotate(-75deg);
margin: -59px 75px;

}
}

@-moz-keyframes camina7{
0%{
webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
-ms-transform: rotate(-21deg);
-o-transform: rotate(-21deg);
transform: rotate(-21deg);
margin: -53px 75px;
}

100% {
-webkit-transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-ms-transform: rotate(-75deg);
-o-transform: rotate(-75deg);
transform: rotate(-75deg);
margin: -59px 75px;

}
}

@-webkit-keyframes sale {
0% {
margin-left:9px;
}

100% {
margin-left:-12px;
}

}

@keyframes sale {
0% {
margin-left:9px;
}

100% {
margin-left:-12px;
}

}
@-moz-keyframes sale {
0% {
margin-left:9px;
}

100% {
margin-left:-12px;
}

}

تاریخ ارسال
20 خرداد 1395
ارسال شده توسط
کوروش هاشمی
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
نویسنده : کوروش هاشمی
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.