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.
Related
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
This question already has answers here:
background-position-y doesn't work in Firefox (via CSS)?
(9 answers)
Closed 3 years ago.
I know this has been answered somewhere already, but can't figure out what's wrong.
I have used repeating-linear-gradient for background and #-webkit-keyframes and #keyframes for animating it. It does work in google chrome but not in firefox.
HTML
<div class="menu_block"></div>
CSS
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position-x:0%;
-webkit-animation:'slide' 30s infinite linear forwards;
}
#-webkit-keyframes 'slide' {
0%{background-position-x:0%;}
100% { background-position-x:100%;}
}
#keyframes 'slide' {
0%{ background-position-x:0%; }
100% { background-position-x:100%;}
}
jsfiddle is here
https://jsfiddle.net/mathews8881/0cj3L6wu/
Could somebody please help.
Try animating both params background-position: 0% 0;. Also missing non-prefixed animation rule.
.menu_block {
height: 100px;
width: 500px;
background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);
background-size: 56px 56px;
background-position: 0 0;
-webkit-animation: slide 30s infinite linear forwards;
animation: slide 30s infinite linear forwards;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
#-webkit-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
<div class="menu_block">
</div>
Remove the single quotes on the animation/keyframes property values, the -webkit- prefix on animation and use background-position: 0%; instead of background-position-x:0%; (as mentioned in a comment, background-position-x is not supported across browser).
Note, since your prefixed properties weren't consistent applied I removed all of them, so you need to add them back to cover older browser versions needing them. Also, in your case, no need to use forwards in your animation when using infinite
.menu_block {
height:100px; width:500px;
background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
background-size:56px 56px;
background-position:0%;
animation: slide 30s infinite linear;
}
#keyframes slide {
0%{ background-position:0%; }
100% { background-position:100%;}
}
<div class="menu_block">
</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-.
I am trying to do a css3 animation on multiple elements.
All those elements have different background-image and they must be replace in the middle of the animation.
The thing is, I want to use the same animation for all elements.
Wich mean, I can't write the original background-image in the animation.
But, the absence of original background-image make the background-image animate with the rest.
I think I would need something like:
background-image: default;
But I don't think it exist.
Anyone have an idea?
Example:
http://jsfiddle.net/4SRrR/
(Look how the background-image start fading to the red one before the div is out of the screen.)
Html:
<div class="anim"></div>
Css:
.anim {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png");
-webkit-animation: anim .75s forwards ease-in;
}
#-webkit-keyframes anim {
0% {-webkit-transform: translateX(0px);}
50% {-webkit-transform: translateX(-400px);}
51% {-webkit-transform: translateX(-400px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
100% {-webkit-transform: translateX(0px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
}
One posibility would be to have 2 backgrounds, and then in the animation just reference the sizes of the first and the second one:
fiddle
The CSS would be:
.anim {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png"), url("http://www.vt2k.com/processing/images/redball.jpg");
background-size: 100% 100%, 0% 100%;
background-repeat: no-repeat;
-webkit-animation: anim 7.5s forwards ease-in;
}
#-webkit-keyframes anim {
0% {-webkit-transform: translateX(0px); background-size: 100% 100%, 0% 0%;}
50% {-webkit-transform: translateX(-400px);background-size: 100% 100%, 0% 0%;}
51% {-webkit-transform: translateX(-400px); background-size: 0% 0%, 100% 100%; }
100% {-webkit-transform: translateX(0px); background-size: 0% 0%, 100% 100%;}
}
I have increased the duraion of the transition so that it is more visible. And also overdefined the background-size; it wouldn't be necesary to repeat it in every frame.
I'm confused as to what the question is but I'll take a stab at it. If you take the 51% animation off then it seems to work slightly better. It will shrink until it is gone and then as it comes back the background-image fades in.
One of the hard things with CSS3 animations is that there isn't an easy way to tell when the animation is 50% done. What you could do is 2 keyframe animations. With JS you can listen for the first animation ending. You could add the background-image and then the class that will trigger the second part of the animation. It's not pretty but could work.
I have this: http://d.pr/i/A2b3 which acts as the divider between the header and the main content.
The image is set as the background image, repeat-x, of the header container.
<header> <--- image is background of this
<div id="container"></div>
</header>
I want the image to slide across the screen slowly almost in a wave like effect. Is this possible with CCS3 animations? If so can someone help?
Thanks
I would suggest using jQuery and a simple image slider with a shortened image pause so the image keeps on switching. As far as i know its not possible to get a video to appear in a slider (not without a play button of some sort). http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ would be an example of what i would use.
Try this!
CSS:
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
I created a Fiddle for you to play with here:
http://jsfiddle.net/e3WLD/3/