I'm trying to animate and slide images onto the screen from right to left one after the other using CSS.
However, I can't seem to achieve this at all.
The images are just appearing all at the same time without any slide animation.
Here is my JSFIDDLE:
https://jsfiddle.net/npvsrkcy/
And my entire CSS code:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
}
#keyframes slide {
from { right: -150%; }
to { left: 0%; }
}
Basically what I need to achieve is a smooth animation.
could someone please advise on this?
I can do this via jQuery but thats not the slide animation as I'm after and it doesn't look as smooth as CSS animation either.
This is the jQuery working version: http://jsfiddle.net/RSk7n/95/
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
Related
I'm working on creating a Slider image, using animation and transition at once. the animation property translates a div(.slider__images) to the left almost every 6.5 sec and the transition property works when the user clicks the small rounded button to translate the Slider to the left with a specific value. But the problem is I can't use both of them it's simply does not work, I need to comment one of them to make the animation or the buttons work. You can have a look at the code on codepen: https://codepen.io/Youssri/pen/GbajOQ?editors=1100
NOTE: the animation is on comment, try to uncomment it... it won't work!
This is the keyframe animation:
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
40% {
left: -100vw;
}
60%{
left: -100vw;
}
80%{
left: -200vw;
}
100% {
left: -200vw;
}
}
This the buttons css
#first-image:target ~ .slider__images {
left: 0;
}
#second-image:target ~ .slider__images {
left: -100vw;
}
#third-image:target ~ .slider__images {
left: -200vw;
}
the div to slide
.slider__images {
width: 300vw;
height: 90vh;
margin: 0;
font-size: 0;
position: relative;
transition: left 2s;
/*animation: slider 20s infinite alternate;*/
}
I want to have an element slide in a few seconds after each slide on my CSS slider. The animation is currently only happens on the first slide. Is what I'm trying to do even possible?
keyframes top {
from { top: 0; right: -250px; }
to { top: 0; right: 100px; }
}
.top {
animation-duration: 2s;
animation-name: top;
}
Here's full demo of what I have:
https://jsfiddle.net/tekgirl/zcm2w6e1/
P.S. I'd like the element to stay at 100px mark instead of bumping all the way to the left.
Here's the link to the github with my code: https://github.com/jtylerm/website-issues
I'm building the site in reactJS. I tried animating the two images with CSS but it doesn't animate correctly. The two images slide in partially then "jump" to the center. The two images need to overlap, which is why I have a z-index listed in the CSS.
I'm not against animating the images using javascript, if that is a better solution than using CSS.
Please help!
Thank you!
I'm not sure where the images need to end, but this is an example of how you can let them slide in smoothly.
To let the green image be on top, assign z-index: -1 to the purple image.
.from-left {
position: absolute;
left: -100px;
animation: move-right 3s ease forwards;
}
.from-right {
position: absolute;
right: -100px;
animation: move-left 3s ease forwards;
}
#keyframes move-right {
100% {
left: calc(50% - 50px);
}
}
#keyframes move-left {
100% {
right: calc(50% - 50px);
}
}
<div class="container">
<img class="from-left" src="http://placehold.it/100/00ff00">
<img class="from-right" src="http://placehold.it/100/0000ff">
</div>
I was trying to create a pure css3 image slider with infinite continuous slide animation. I was able to do the animation using CSS3 but a small issue facing at the end of last slide. After last slide it gets suddenly to the first slide without css3 smooth transform effect. Any simple possible way to fix this ?
Here is the code
#slideshow{
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;}
#slideshow img{
position: absolute;
left: 0;
top: 0;
animation: slide 5s infinite;
}
#keyframes slide{
0%{ transform:translateX(0px) }
33%{ transform:translateX(-200px) }
66%{ transform:translateX(-400px) }
100%{ transform:translateX(-600px) }
}
<div id="slideshow"><img src="http://oi67.tinypic.com/24mia39.jpg"></div>
jsFiddle link
You haven't animation after last side because your animation is finish. Maybe add a transform effect like :
#keyframes slide{
0%{ transform:translateX(0px) }
25%{ transform:translateX(-200px) }
50%{ transform:translateX(-400px) }
75%{ transform:translateX(-600px) }
100%{ transform:translateX(0px) }
}
jsFiddle link
Is it possible, using CSS transitions, to tilt (rotate) an element slightly off-horizontal during the first half of its movement--and tilt it back to horizontal during the second half, as it reaches the end of its movement? I don't want a 360-degree spin. Just a slight tilt, then tilt back again.
Here's a picture of the beginning, middle, and end of the transition I have in mind:
This question is best demonstrated by watching it. Here's a fiddle that shows what I would like to achieve--but I'd like to achieve it with CSS transitions, not JavaScript:
http://jsfiddle.net/bmorearty/S5Us6/22/
When you run this, watch the gray box closely. It tilts a bit during motion, then reverses its tilt halfway through--so when it comes to rest, it is no longer tilted.
I would like whole motion this to happen in a single transition from one state to another simply by adding a class to an element--not in two transitions, because that would require me to time the end of one with the beginning of the next.
I suspect the answer would incorporate transition-delay and/or #keyframes.
Thanks.
this would be the css for it:
#card {
padding: 2em;
border: 1px solid gray;
display: inline-block;
position: relative;
background-color: #eee;
/*instead of infinite you can add a number of times you want it running*/
animation: moving infinite 6s;
}
#keyframes moving {
0%{
margin: 0;
}
50% {
-webkit-transform: rotate(45deg);
}
100% {
margin: 50px;
}
}
You could do something like this.
http://cdpn.io/sIxFA
Obviously, you could smooth out the rotation as you please, and add the rotate class on click.
I got it!
The solution is to use a CSS animation with a keyframe that transforms the rotation (e.g., to about 8deg) when it is 50% of the way through, but returns the rotation to 0deg at the end. It's pretty sweet.
Here's a demo on JSBin:
http://jsbin.com/ogiqad/4/edit
(The code below uses -webkit but you can add all the other browser variations to make it work on more browsers.)
#-webkit-keyframes tilt-and-move {
0% {
left: 0;
top: 0;
}
50% {
-webkit-transform: rotate(8deg);
}
100% {
left: 100px;
top: 100px;
}
}
#card {
position: relative;
}
#card.moved {
left: 100px;
top: 100px;
-webkit-animation-duration: 0.4s;
-webkit-animation-name: tilt-and-move;
}