I want to move an image from right to left, the image should enters from the right side of the screen and exits from left side of the screen, for that I have written this css animation code but it is not working please help.
.CSS file
.imageAnimation {
position: 100% 0px;
-webkit-animation: moveToLeft 10s linear infinite;
animation: moveToLeft 10s linear infinite;
}
#-webkit-keyframes moveToLeft {
from {position: 100% 0px;}
to {position: 0% 0px;}
}
#keyframes moveToLeft {
from {position: 100% 0px;}
to {position: 0% 0px;}
}
.HTML file
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="animation.css"/>
</head>
<body>
<img class="imageAnimation" style="position:absolute; top:0px; left:100%;" src="enemy.png" width="300" height="100"/>
</body>
</html>
Try this
body {
position: relative;
overflow-x: hidden;
}
img {
position: absolute;
animation: moveImage 3s linear infinite;
left: -350px;
}
#keyframes moveImage {
100% {
transform: translateX(calc(100vw + 350px));
}
}
<img src="http://placehold.it/350x150">
350px in translateX(calc(100vw + 350px)); is width of image so image will go to end of window + width of image. So you will have to change that for width of your image, same for left: -350px.
You're actually really close...just using position incorrectly. Use top and left instead.
.imageAnimation {
position: absolute;
left: 100%;
top: 0px;
-webkit-animation: moveToLeft 10s linear infinite;
animation: moveToLeft 10s linear infinite;
}
#-webkit-keyframes moveToLeft {
from {left: 100%;}
to {left: 0%;}
}
#keyframes moveToLeft {
from {left: 100%;}
to {left: 0%;}
}
My answer uses calc and percentages so the box will start outside of the right side of the screen, across the view port area and out of the left side of the screen. You can read about calc browser support here. Heres the code:
.wrap {
background: pink;
height: 200px;
overflow: hidden;
position: relative;
width: 100%;
}
.box {
animation-name: moveToLeft;
animation-duration: 5s;
background-color: red;
height:100px;
left:calc(0% - 100px);
position:absolute;
width:100px;
}
#keyframes moveToLeft {
0% {left:calc(100% + 100px);}
100% {left:calc(0% - 100px);}
}
<div class="wrap">
<div class="box"></div>
</div>
I use a parent container with an overflow: hidden so the scroll bar will not show when the box is out of the frame. Also the 100px you see in the calc will need to be the same width as your element. Here is a js.fiddle with the code. Hope that helps.
Related
I was wondering why my background image is not repeating when I have background repeat set to repeat. I am using bootstrap, that is why there is a col-lg-6 there. I am a new to coding and I wanted to test my skills by making an exact copy of another website. This is the website. If you go to that, you can see exactly want I want.
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
One way of thinking of this is that there is a continuous scroll upwards on the image div, and then we rotate that div 15%.
First therefore we need to get a continuous scroll. This can be achieved by putting both a before and after pseudo element on the image div which have the required background. These then both get animated upwards, one starting at top: 0 one starting at top: 100%. That way the scroll is continuous - the after pseudo element follows up immediately after the before one.
So far so good, but when we rotate the image div, there are gaps where the parent div shows through. So we make the before and after pseudo elements twice the size in both directions, get their background images repeated and adjust their positions so they always cover the parent div. The parent is also given overflow: hidden so we don't see the extra bits.
Here is a working snippet. Note that the choice of having the background images 30% of width is arbitrary - change it to what you want.
Note also that the website that is to be copied has a bug, though minor. Every so often you see a slight jerk in the scrolling. We have overcome that problem here by having the two sets of background animate independently so as the second one gets to the top, the first takes on opacity 0 for a split second as it repositions itself back to the top. This fools us into thinking it's all continuous. That website has also put a 'sloping' white over part of the div but that was not part of the question asked here.
.container {
}
.image-div {
position: relative;
overflow: hidden;
}
#image {
position: absolute;
transform: rotate(-15deg) translateX(-25%) translateY(-25%);
height: 200%;
width: 200%;
overflow: hidden;
}
#image::before, #image::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-size: 30% auto;
background-image:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
z-index: 1;
}
#image::after {
top:100%;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
99.95% {
transform: translateY(-100%);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 0;
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
Try below code. Let me know if you succeed.
<style>
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
</style>
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="float"></div>
</div>
I'm working on a simple CSS animation and came across a curious problem.
When animating several small divs, if I zoom in or out on Chrome/Firefox the heights of the divs becomes inconsistent - despite them all sharing the same size styles.
Is there any way to address this using CSS? I want the bars to maintain a consistent height without regard to the zoom level. I realize this is something of an edge case, but want to cover as many bases as possible!
Example is here.
HTML
<div class='animation-box animate'>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
</div>
CSS
.animation-box {
width: 100px;
}
.animation-bar {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: bargraph;
animation-timing-function: linear;
background-color: #0d97c1;
height: 3px;
margin: 2px;
}
#keyframes bargraph {
0% {
width: 100%;
}
50% {
width: 10%;
}
100% {
width: 100%;
}
}
What about a simplification with only one element and less of code:
.animation-bar {
animation: bargraph 1.5s infinite linear alternate;
width: 100px;
height: 25px;
background-image: linear-gradient(#0d97c1 50%, transparent 50%);
background-position:0 0;
background-size: 100% 5px;
background-repeat: repeat-y;
}
#keyframes bargraph {
0% {
background-size: 100% 5px;
}
100% {
background-size: 10% 5px;
}
}
<div class="animation-bar"></div>
This is a problem of subpixel rendering. The issue here is that when you are zooming, the space between two bars will have to snap to a given pixel on your screen.
If you have a 3px margin # 150% zoom, the computed space is 4,5px. Meaning that the zoomed space on screen will be inconsistently rendered at 4 or 5px.
On a regular CPU computed dom, your bar will be placed at the closest value, producing those weird gaps.
What you could do to minimize the effect is applying some GPU rendered CSS (opposed to the regular CPU rendering) which is way better at rendering subpixel graphics.
One way of doing that is applying transforms.
.animation-box {
width: 55px;
margin: 0 15px 0 -5px;
}
.animation-bar {
animation: bargraph 1s infinite linear;
transform-origin: top left;
height: 3px;
background-color: #0d97c1;
margin-bottom: 3px;
}
#keyframes bargraph {
0% {
transform: scaleX(1);
}
25% {
transform: scaleX(.8);
}
50% {
transform: scaleX(.6);
}
75% {
transform: scaleX(.8);
}
100% {
transform: scaleX(1);
}
}
<div class='animation-box animate'>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
</div>
I recommend an excellent article on Smashing Magazine on that topic : CSS GPU Animation: Doing It Right
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 6 years ago.
I'm working on a website with animated elements using CSS3. One problem I have is the vertical scrolling bar. So there's an element that is constantly sliding from left to right and back:
#keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
So that this works, the object is bigger than the screen size. Now of course the vertical scrolling bar appears. How can I hide that?
I put the element in a container, where I defined overflow-x: hidden but somehow it didn't work. Maybe I just did a mistake? What method should I use?
Here's the fiddle:
https://jsfiddle.net/hsdoy3t4/
Thank you very much for your help.
Because it's taking default margin of body tag.
Set margin:0 for body tag.
body{
margin:0;
}
#home {
width: 100vw;
overflow-x: hidden;
}
#object {
background-image: url('http://www.1000skies.com/800trim.jpg');
width: calc(100% + 50px);
height: 158px;
position: relative;
-webkit-animation: waves 2s infinite;
-moz-animation: waves 2s infinite;
animation: waves 2s infinite;
}
#-webkit-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
#-moz-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
#keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
<section id="home">
<div id="object"></div>
</section>
I am using an img tag wrapped by a div to display a svg spinner. The div has a rotate animation on it. Do you know why its not spinning on the origin and why are the inline-spinners overlapping?
I cannot use SVG animationTransform because IE does not support it. Since its a simple spinner, I was hoping to rotate just the div and get the loading effect.
Here's the plunkr demo:
https://plnkr.co/edit/jiuI4rlETsNHN1yLbG2k?p=preview
<div class="spinner">
<img src="spinner.svg" alt="">
</div>
<div class="spinner">
<img src="spinner.svg" alt="">
</div>
<h4>Inline Spinners</h4>
<div class="spinner-inline">
<img src="spinner.svg" alt="">
</div>
<div class="spinner-inline">
<img src="spinner.svg" alt="">
</div>
/* Styles go here */
body{
background: #444;
color: white;
}
.spinner{
display: block;
height: 50px;
width: 50px;
animation: spin 2s linear infinite;
transform-origin: 50% 50%;
}
.spinner-inline{
display: inline-block;
height: 10px;
width: 10px;
animation: spin 2s linear infinite;
transform-origin: 50% 50%;
}
#keyframes spin{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Update:
.spinner *{
width: 100%;
height: 100%;
}
.spinner-inline *{
width: 100%;
height: 100%;
}
Adding above CSS for child elements helped a little but the inline spinners still dont spin on origin.
The reason your inline-spinners have an offset in the transform origin is because the default line-height (28px) takes over your height, so resetting that you solve the origin problem:
.spinner-inline{
display: inline-block;
height: 10px;
line-height:0;/*****/
width: 10px;
animation: spin 2s linear infinite;
transform-origin: 50% 50%;
}
https://plnkr.co/edit/mW7BamvPST89ufqNyE8N?p=preview
I looked at your plunkr, although I don't believe I can answer the origin question, the inline spinners is an easy fix.
You have the width and height set to 20px (which is only half of their actual size).
Set your spinner-inline css to:
.spinner-inline{
display: inline-block;
height: 40px;
width: 40px;
animation: spin 2s linear infinite;
transform-origin: 50% 50%;
}
And they will no longer overlap.
*Alternatively, it looks like setting this does make the spinners spin on origin as well.
I wanted to ask, what is wrong with this CSS code? It is used to animate background image - zoom effect.
#media (min-width: 1000px) {
.anim-on {
background-size: 110% 110%;
background-position: center center;
animation: shrink 12s infinite alternate;
}
.anim-out {
background-size: 120% 120%;
background-position: center center;
animation: small 6s infinite alternate;
}
#keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
#keyframes small {
0% {
background-size: 100% 100%;
}
100% {
background-size: 110% 110%;
}
}
}
This code generates nice effect, but i saw, that on slower machines, affect is bad.
What is wrong? Or maybe someone has better idea, how create this effect, in better technique?
Background size is a visual property and so any change to its value would cause repainting to occur. Painting is a very expensive operation and is bound to have an impact on the performance in low end machines. One way to overcome this would be to use CSS transform (scale to be precise) instead of background-size change to produce the animation.
Snippet which will cause performance impact:
The below snippet uses the same animation as in the question. When you run this snippet and inspect it using Chrome Dev tools (by enabling "Show Paint Rects" option), you'd see that both images have a paint rect associated with them (green or red colored box) and that as the animation is happening the box keeps blinking (or stays as-is). This indicates that a repaint is happening often and thus it impacts performance.
.anim-on,
.anim-out {
height: 200px;
width: 200px;
background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on {
background-size: 110% 110%;
background-position: center center;
animation: shrink 12s infinite alternate;
}
.anim-out {
background-size: 120% 120%;
background-position: center center;
animation: small 6s infinite alternate;
}
#keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
#keyframes small {
0% {
background-size: 100% 100%;
}
100% {
background-size: 110% 110%;
}
}
/* Just for demo */
div {
float: left;
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>
Snippet which will cause lesser performance impact:
In the below snippet, I have added the background-image to a pseudo-element and then used scale transform on it to produce the zoom-in/out effect. The parent's overflow: hidden setting prevents the animation from affecting its size. If you inspect this with Chrome Dev tools you'd see that the green or red colored box appears only once when the page is loaded and goes away. This indicates that there is no further repaint is happening during the animation itself and hence it is better from a performance point of view. You'd also notice that this animation is more smoother than the earlier one.
.anim-on,
.anim-out {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.anim-on:after,
.anim-out:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on:after {
animation: shrink 12s infinite alternate;
}
.anim-out:after {
animation: small 6s infinite alternate;
}
#keyframes shrink {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
/* Just for demo */
div {
float: left;
margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>
You can find more information about the various CSS properties and how a change to their value will impact the rendering process in the CSS Triggers website.
You can find more information about the rendering process and how using transform (as opposed to few other properties) results in a performance improvement in the below articles/sites:
HTML5 Rocks - Accelerated Rendering in Chrome
GPU Accelerated Compositing in Chrome.
Google Developers - Rendering Performance.
I edited Henry code, now css is reusable, so user can add background image to element via CMS, and css code will do the rest:
.anim {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
**background-size: 0px!important;**
}
.anim:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-size: cover !important;
**background: inherit;**
z-index: -1;
}
.anim:after {
animation: shrink 12s infinite alternate;
}
#keyframes shrink {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<section class="anim" style="background: url('images/1.png');"></section>
Thanks * :)