Moving Image Effect Using CSS3

Moving an image using css animation effect will make website as more attractive. Here is the tutorial for moving image effect using css3 animation.

SYNTAX

animation:  animation-name |  animation-duration |  animation-iteration-count

animation-name  -  animation name, we have to define property of this animation name

animation-duration  -  speed of the effect

animation-iteration-count – Number of times the animation will works.

 

Moving Image Effect Using CSS3

Moving Image Effect Using CSS3

 

 

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>

 

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.bg
{
-webkit-animation: move 30s infinite;
-moz-animation: move 30s infinite;
-ms-animation: move 30s infinite;
-o-animation: move 30s infinite;
animation: move 1s infinite;
background: url(image/bg.png);
height: 190px;
margin: -8px;

}

@-ms-keyframes move {
from {background-position:0% 0%;}
to {background-position:100% 100%;}
}
@-moz-keyframes move {
from {background-position:0% 0%;}
to {background-position:100% 100%;}
}
@-webkit-keyframes move {
from {background-position:0% 0%;}
to {background-position:100% 100%;}
}
@keyframes move {
from {background-position:0% 0%;}
to {background-position:100% 100%;}
}

 

 

 

About prasad k

Prasad Kuppusamy has written 80 post in this blog.

i m php developer, web designer.

One Response to Moving Image Effect Using CSS3

  1. Raj kumar says:

    Nice and helpful tutorial for beginners.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

hypercoagulability-ruddily