I'm trying zoom in animation for background image for a particular second. it's happening but it resets again.
i created sample link in jsfiddle:
https://jsfiddle.net/onlinesolution/tk6rcLdx/
what am i missing here?
body:before{
content:"";
position:absolute;
top:0px;
left:0px;
height: 100vh;
width: 100%;
background-image: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg");
background-position:center center;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -9;
-webkit-animation: zoomin 5s ease-in;
animation: zoomin 5s ease-in;
}
/* Zoom in Keyframes */
#-webkit-keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}
#keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
} /*End of Zoom in Keyframes */
You're missing a simple propertie: animation-fill-mode: forwards
Here's your code with that propertie added, you will see that works fine
https://codepen.io/manAbl/pen/vjbgYK
Further reading:
https://devdocs.io/css/animation-fill-mode
Related
I am trying to create an animation background in a small div, but chrome is getting me unknown property name for the #keyframes all time, and I have the gradient, but I am unable to sho the animation.
#keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
#-webkit-keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100% }
}
.labelSincroAlert {
text-align: center !important;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: -webkit-linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
background-size: 600% 100%;
animation: gradient 16s ease infinite;
-webkit-animation: gradient 16s ease infinite;
animation-direction: alternate;
}
I'm using cuba framework and scss for this, It's important?
Here in the inspector is where I get the error
This only happends to me because I am doing an extension from the cuba-platform hellium theme. I don't know how to solve it.
The problem is I was using helium-ext.scss, and in this cases you have to use helium-ext-defaults.scss. It was inded related with cuba-framerwork and his theme. To solve it just put you #keyframe inside of helium-ext-defaults.scss and the rest of the code on helium-ext.scss.
I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I have an svg with two different animations; a briefcase hopping up and some speed lines. What I want to happen is when it is hovered over, the animations play. The problem is you have to hover over the solid parts rather than the whole thing. I don't want the outer ring moving, so I can't apply the animations to the whole thing.
For the SVGs that have only one animation for, I've used an circle with an opacity of zero to make them work. This does not work with multiple animations.
/* Animation Code */
.case:hover {
animation: jump 1.5s linear infinite;
position:relative;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
transform-origin: 50% 50%;
}
#keyframes jump{
0% {transform: translate(0,0) ;}
30% {transform: translate(0,-10%) ;}
100% {transform: translate(0,0) ;}
}
.lines:hover {
animation: woosh 1.5s linear infinite;
position:relative;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
transform-origin: 50% 75%;
}
#keyframes woosh{
0%, 5% {
transform: scaleY(0);
}
30% {
transform: scaleY(-1);
opacity: 0.3;
}
55% {
opacity: 0;
}
100% {
transform: scaleY(-1);
opacity: 0;
}
}
https://jsfiddle.net/paulmadsenbe/tj7q5sgp/
If you put both of your animated objects in a parent container and then used container:hover .case and container:hover .lines you can trigger them together. Here's a modification of your fiddle: https://jsfiddle.net/3kewaL9r/
I have added css code for animation zoomin its working fine but the problem is i haven't written code for zoom out but the image is showing for both zoomin and zom out.
<div class="slotholder"><img src="http://www.server.com/fhdfsmile/wp-content/uploads/2018/11/slider01.jpg"></div>
.slotholder {
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-animation: zoomin 0s ease-in infinite;
animation: zoomin 30s ease-in infinite;
}
#-webkit-keyframes zoomin {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#keyframes zoomin {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
i have written css for zoom in but it is coming for zoom out also.I dont want zoom out option only the image need to be zoomed.
Changes
Replace infinite with forwards
#keyframes are progressive so when it was:
#keyframes zoomin {
0% {
transform: scale(1);
}
50% {
/* Changed to 1.25 */
transform: scale(1.5);
}
100% {
/* Changed to 1.5 */
transform: scale(1);
}
}
At the beginning 0% it was normal size scale(1), then halfway 50% it was bigger scale(1.5), but at the end 100% it shrunk back down to normal size scale(1).
transform-origin: top left was added to position the image to avoid cropping.
Demo
.slotholder {
animation: zoomin 10s ease-in forwards;
transform-origin: top left;
}
#keyframes zoomin {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1.5);
}
}
<div class="slotholder"><img src="https://smileaz.com/wp-content/uploads/sites/45/2018/07/types-of-dentures.jpg" width='300'></div>
I am trying to perform a rotate on the Y axis of an element that contains a background-image. When I reach 50% of that animation, I would like to change the image.
The problem:
The background-image is also animated
I am trying to do this without the use of Javascript.
Is that possible?
Code:
.picture {
background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: 100% 100%;
border-radius: 100%;
}
.animated {
-webkit-animation-name: turns;
animation-name: turns;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes turns {
0% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); -webkit-transform: rotateY(0deg); }
1% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
50% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
51% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); }
100% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); -webkit-transform: rotateY(180deg); }
}
jsFiddle: http://jsfiddle.net/dmzj7cfh/1/
If the problem that you have is that the background image change does nt happen in the 50% of the rotation, it's because the timing funciont is applied for the individual steps in the case of the background (because it is set in every keyframe), but for the full animation in the case of the rotation.
The easiest way to solve it is to set
-webkit-animation-timing-function: linear;
so that it doesn't matter the above problem
I have also fixed a problem with the background size.
fiddle
You should probably use multiple animation keywords to simplify, as you need to change two different properties.
For background-image animation, use animation-timing-function: steps(2); and for transform: rotate;, use linear function to simplify the keyframes.
Using non-linear functions like ease and custom cubic-bezier()s can create a lot of complexities.
FIDDLE
Snippet :
div{
display: inline-block;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: cover;
border-radius: 100%;
-webkit-animation-name: animate, background;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear, steps(2);
animation-name: animate, background;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear, steps(2);
background-image: url('http://i.imgur.com/gmucjHi.png');
position: relative;
}
#-webkit-keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#-webkit-keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
#keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
<div></div>
Note : I haven't added vendor prefixes other than -webkit-.