is it possible to spin a background-image in css?
i can spin an element using:
#-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
#-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
but what about if i want to spin an element's background-image?
can't find nothing, i can use gif but i would like to make it in css if possible !
any idea?
thanks
i forgot to say if is possible to make the animation cross-browsers supported :P
You can do that setting the background on a pseudo element, for instance an after
.main {
width: 200px;
height: 300px;
position: relative;
border: solid 1px gray;
}
.main:after {
width: 100%;
height: 100%;
position: absolute;
background: url("http://placekitten.com/800/1200");
background-size: cover;
content: '';
-webkit-animation: spinX 3s infinite;
animation: spinX 3s infinite;
}
#-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
#keyframes spinX
{
0% {transform: rotateX(0deg); transform-origin: 0% 50% 0;}
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;}
}
<div class="main"></div>
demo
You could put the background on a pseudo element, like ::before and animate that.
Example, and another one :)
If you have content above the image, add z-index: -1 to the pseudo element.
Related
I want an element to be animated like a swaying plant. I am looking to animate a div in the following manner.
Fix the bottom
Move the head back and forth
Looking for full css solution.
I have tried this,
#keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-1deg);
}
50% {
transform: rotate(2deg);
}
75% {
transform: rotate(-0.4deg);
}
100% {
transform: rotate(1deg);
}
}
You can set transform-origin property to bottom.
.el {
margin: 30px 50px;
width: 0;
height: 0;
border-style: solid;
border-width: 150px 50px 0 50px;
border-color: #007bff transparent transparent transparent;
animation: wiggle infinite 3s alternate;
transform-origin: bottom;
}
#keyframes wiggle {
0% {transform: rotate(0deg);}
25% {transform: rotate(-3deg);}
50% {transform: rotate(5deg);}
75% {transform: rotate(-1deg);}
100% {transform: rotate(2deg);}
}
<div class="el"></div>
I am trying to create an animation of a balloon flying. All is weel in all modern browsers except IE11.
I am using translateX and translateY without any problem but scale is causing the image to become blurry.
#media (min-width: 1100px) {
.balloon-outer,
.balloon-inner,
.balloon {
height: 100%;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
animation-duration: 60s;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
will-change: transform;
pointer-events: none;
}
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
}
.balloon {
transform-origin: 50% 50%;
animation-name: travel-y;
animation-timing-function: ease-out;
transform: translateY(90%);
}
.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
transform-origin: 100% 100%;
animation-name: scale;
animation-timing-function: linear;
transform: scale(3);
}
}
#keyframes scale {
0% {transform: scale(3);}
80% {transform: scale(0);}
100% {transform: scale(0);}
}
#keyframes travel-x {
0% {transform: translateX(-10%);}
80% {transform:translateX(-45%);}
100% {transform:translateX(-45%);}
}
#keyframes travel-y {
0% {transform: translateY(120%);}
80% {transform:translateY(-70%);}
100% {transform:translateY(-70%);}
}
<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>
http://codepen.io/rachelreveley/pen/xdLGEO
I have tried this trick which I have seen in several places but it made no difference.
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
Try changing all your translateX and translateY to translate3d like:
#keyframes travel-x {
0% {transform: translate3d(-10%,0,0);}
80% {transform:translate3d(-45%,0,0);}
100% {transform:translate3d(-45%,0,0);}
}
#keyframes travel-y {
0% {transform: translate3d(0,120%,0);}
80% {transform:translate3d(0,-70%,0);}
100% {transform:translate3d(0,-70%,0);}
}
do the same everywhere you have been using translates in your example. translate3d enables hardware acceleration which will help with animations.
you can see this post for more info.
You can use a fallback to IE-11 with the vendor prefix "-ms-transform".
for example:
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
-ms-transform: translateX(-20%);
}
See the answer here.
CSS3 transform:scale in IE
I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
Now, as you can see, it return to the original sizes suddenly, without any smoothness.
My keyframes:
#keyframes imageZoom {
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom {
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom {
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
The child div styles:
#myFeaturedItems:hover article {
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#myFeaturedItems article {
background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
background-position: center center;
background-size: cover;
display: block;
height: 100%;
width: 100%;
}
My demo link: http://emanuelezenoni.com/dev/test/
Thanks a lot!
You don't need an animation to achieve what you want. A transition when you hover over the article is suitable. See my very basic example of the transition here below.
What it does:
transition: transform 1s ease-in-out;
This will put a transition on the property transform for 1s with easing ease-in-out. When you hover over .box, the transform: scale(1.25); will run, because we said that a transition was applied on it. The overflow: hidden; makes sure that the content will not be bigger than the box it's in.
You can tweak with the settings to your needs.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.box {
margin-left: 50%;
width: 50%;
min-height: 100%;
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
.box:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="container">
<article class="box">
</article>
</div>
I can't seem to find a solution for this problem.
There's a sprite animation that I've put into a div.
Now I want 2 different movements on that containing div.
should bring the div into view
should move the div from left to right in an infinite loop
It works perfectly in FF & IE, but the 2nd animation in the chain does not play in webkit browsers....
The funny thing is that if you open the inspector in Chrome and hover over the divs in the html code, you can actually see the container and the sprite div moving, but the sprite itself doesn't. Weird...
Here's the code http://codepen.io/anon/pen/yyGJGX?editors=110
Thx in advance.
The html
<body>
<section class="center">
<div class="movingBox">
<div class="counter"></div>
</div>
</section>
</body>
The CSS
.center {
width:600px;
height:400px;
position:absolute;
z-index: 0;
left:50%;
top:50%;
margin:-200px 0 0 -325px;
text-align:center;
overflow: hidden;
}
.movingBox {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
z-index: 50;
-webkit-animation-name: box, box-move;
-webkit-animation-delay: 0s, 4s;
-webkit-animation-duration: 4s, 6s;
-webkit-animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards, none;
-webkit-animation-direction: normal, alternate;
animation-name: box, box-move;
animation-delay: 0s, 4s;
animation-duration: 4s, 6s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
animation-direction: normal, alternate;
}
.counter {
position: absolute;
bottom: 0;
left: 150px;
width:160px;
height:160px;
display:block;
background:transparent url(../img/test.png) 0 0 no-repeat;
z-index: 20;
-webkit-animation: teller 4s steps(4) infinite;
animation: teller 4s steps(4) infinite;
}
#-webkit-keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#-webkit-keyframes box {
0% {-webkit-transform: translateX(-600px); }
100% {-webkit-transform: translateX(0px); }
}
#-webkit-keyframes box-move {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
#keyframes teller {
0% {background-position: 0 0; }
100% {background-position: 0 -640px; }
}
#keyframes box {
0% {transform: translateX(-600px); }
100% {transform: translateX(0px); }
}
#keyframes box-move {
0% {transform: translateX(0px); }
33% {transform: translateX(100px); }
66% {transform: translateX(50px); }
100% {transform: translateX(350px); }
}
CSS Solution
After playing around, I found out, that the issue is if you try combining two keyframe animations with the same CSS properties (-webkit-transform: translateX()) the first one will interfere with the second one.
A working solution is to just animate the left-value in your first keyframe animation and afterwards use -webkit-transform: translateX.
#-webkit-keyframes box {
0% { left: -600px; }
100% { left: 0; }
}
#-webkit-keyframes boxMovePlease {
0% {-webkit-transform: translateX(0px); }
33% {-webkit-transform: translateX(100px); }
66% {-webkit-transform: translateX(50px); }
100% {-webkit-transform: translateX(350px); }
}
I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down.
Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel.
View the JSFiddle in Chrome and FireFox to view the difference: http://jsfiddle.net/gonygdfz/6/
Is there any way to make FireFox render this smoothly rather than having it jumping pixel by pixel? It's extremely noticeable in the actual application for this.
The Markup:
<div id="parent">
<div id="move-x">
<div id="move-y">
<div id="child"></div>
</div>
</div>
</div>
The CSS:
#parent {
width: 400px;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
animation: range-y 10s infinite ease;
}
#move-x {
animation: range-x 10s infinite ease;
-webkit-animation: range-x 10s infinite ease;
}
#move-y {
animation: range-y 15s infinite ease;
-webkit-animation: range-y 15s infinite ease;
}
#keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
#-webkit-keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
It appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
ALL IS NOT LOST
I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.
CLICK FOR COMPARISON
Techniques used for this effect:
Linear transitions instead of ease.
Box-shadow on animated object. (Softened edge helps create fake AA effect).
Rotate object. Adding the smallest rotate helps to better utilised the rendering engine.
CSS
#parent {
width: 50%;
float:left;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
box-shadow:0 0 1px rgba(0,0,0,0.7);
animation: range-y 10s infinite linear;
-webkit-animation: range-y 10s infinite linear;
}
#move-x {
animation: range-x 10s infinite linear;
-webkit-animation: range-x 10s infinite linear;
}
#move-y {
animation: range-y 15s infinite linear;
-webkit-animation: range-y 15s infinite linear;
}
#keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
#-webkit-keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#-webkit-keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
FINAL WORD
You can still tweak the effects a little either way to fit your requirements.
It's not perfect but I hope it helps soften the end effect for your actual animation.
Use a small amount of rotation with the transformation. This forces Firefox to avoid the optimization and resample the image on every frame.
#keyframes optimized {
0%{
transform: translateX(0%);
}
100%{
transform: translateX(200px);
}
}
#keyframes subpixel {
0%{
transform: translateX(0%) rotate(0.1deg);
}
100%{
transform: translateX(200px) rotate(0.1deg);
}
}
div{
width:5px;
height:50px;
background-color: red;
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:linear;
}
.optimized{
animation-name: optimized;
margin-bottom:1px;
}
.subpixel{
animation-name: subpixel;
}
<div class="optimized">
</div>
<div class="subpixel">
</div>