# I want to display slide an image infinite time without hover

**URL:** <https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281>\
**Category:** web dev\
**Created:** [May 27, 2018, 10:02am UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281 "2018-05-27T10:02:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umair\_Riaz\_Ahmed](https://avatars.discourse-cdn.com/v4/letter/u/e495f1/32.png) [@Umair\_Riaz\_Ahmed](https://forum.kirupa.com/u/Umair_Riaz_Ahmed)\
**Post date:** [May 27, 2018, 10:02am UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281/1 "2018-05-27T10:02:25Z")

</div>

Reference to your video title **'Slide an Image on Hover Using a CSS Transition’**

i have a query that is it possible to slide an image infinite time without hover

I am working on my project i need to bring this effect on my image

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 27, 2018, 11:46am UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281/2 "2018-05-27T11:46:40Z")

</div>

Though it’s possible to set a delay attribute to the start of a CSS animation, by default an animated element will start on page or element load. A hover is not needed to start an animation. In order to have your image slides continually move you will need to use the timing attribute value **infinite**.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 27, 2018, 4:12pm UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281/3 "2018-05-27T16:12:52Z")

</div>

You can see an example of what John describes here: [https://www.kirupa.com/html5/ken\_burns\_effect\_css.htm](https://www.kirupa.com/html5/ken_burns_effect_css.htm) I am sliding (and zooming in on) an image around forever 😛

---

<div class="post-metadata">

**Author:** ![Umair\_Riaz\_Ahmed](https://avatars.discourse-cdn.com/v4/letter/u/e495f1/32.png) [@Umair\_Riaz\_Ahmed](https://forum.kirupa.com/u/Umair_Riaz_Ahmed)\
**Post date:** [May 27, 2018, 8:10pm UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281/4 "2018-05-27T20:10:23Z")

</div>

I want to have a image, i want it to go up and go down infinite time without hover can u please help me to create with the help of css ? kindly share codes

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 28, 2018, 1:59am UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281/5 "2018-05-28T01:59:03Z")

</div>

Basically this: (you can set your own values)

```
img {
 animation: updn 1600ms ease-in-out infinite;
 height: 100%;
 width: auto;
}
@keyframes updn {
 0% {transform: translate(0, 50px);}
 50% {transform: translate(0, -50px);}
 100% {transform: translate(0, 50px);}
}
```