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.
Related
I have a Button inside a div in which the tick mark appears as we click. The tick mark is added using after pseudo class. But the things looks choppy in browsers (Chrome and Safari) of iOS devices where the animation appears to be stopped and resumes after sometime.The div outside that contains button also has :active pseduo class which transforms it.
//outer div contains the button
div:active {
transform: scale(0.95);
}
// add tick with after pseudo class
.draw:after {
height: 60px;
width: 30px
content: '';
left: 14px;
top: 42px;
position: absolute;
transform-origin: left top;
animation-duration: 300 ms; // animation duration applied it
transform: scaleX(-1) rotate(120deg); // transform applied for the tick mark
animation-name: animate-tick;
}
// keyframes for animation
// animation height and width applied
#keyframes animate-tick {
0% {
height: 0; width: 0;
}
40% {
height: 0px; width: 30px;
}
100% {
height: 60px; width: 30px;
}
}
Have you added #-webkit-keyframes?
Create a named set of keyframes in CSS using the #-webkit-keyframes rule. The set must include at least one keyframe.
Set the -webkit-animation-duration property to a positive, nonzero value.
Set the -webkit-animation-name property to the name of the set of keyframes.
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 have a div element, which has an animation to play when starting the page. I want to make it have another animation to play when I'm hovering over it. It works just fine, but when I get my mouse out of the div element, it plays the starting animation again (fades in from out of the screen).
#keyframes div{
0%{
opacity: 0;
}
}
#keyframes divHover{
50%{
top: 200px;
}
100%{
top: 0px;
}
}
#div{
opacity: 1;
animation: div 1s;
position: absolute;
left: 0px;
top: 0px;
}
#div:hover{
animation: divHover 1s linear 0s infinite;
}
<div id="div"> abc </div>
Expected:
Div starts invisible and fades in. When hovering div, it goes up and down, and keeps doing it while hovering. After stopping the hover, div stops the animation and keeps its full opacity
Actual:
After stopping the hover, div stops the animation but returns to 0 opacity, then takes one second to display the starting animation again.
https://jsfiddle.net/odq125Lu/6/
The issue is due to the fact that you are overriding the first opacity animation with the up & down one then when you unhover you active the first one again.
You can use multiple animations and consider animation-play-state to activate the second one:
#keyframes div {
0% {
opacity: 0;
}
}
#keyframes divHover {
50% {
top: 200px;
}
100% {
top: 0px;
}
}
#div {
opacity: 1;
animation:
div 1s,
divHover 1s linear 0s infinite;
animation-play-state:running,paused;
position: absolute;
left: 0px;
top: 0px;
background:red;
padding:20px;
}
#div:hover {
animation-play-state:running,running;
}
<div id="div"> abc </div>
I'm no expert, but it may have something to do with the fact that you haven't set a 100% value for the animation "divHover"?
#keyframes div{
0%{
opacity: 0;
}
100% {
opacity: 1;
}
}
Show display pop-ups for some second & after some second it will be automatically hidden.
Is there any way in CSS?
I don't want in javascript.
You can use CSS animations to achieve this.
.popup {
/* apply 3 second hiding animation after 10 second delay */
animation: hide 3s 10s forwards;
/* fix popup at the center of screen, optional style */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
/* dimming entire screen except popup */
outline: 100vmax solid #ccc;
}
#keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="popup">
This is popup
</div>
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%; }
}