new to HTML and CSS. Could anyone teach me how to animate my picture from my current point to, another location? For example, moving from "top: 280px: left 600px;" to "top:180px; left 500px;"
Need someone to guide me along, thanks.
Below is my current code:
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">
Here is a simplified example of an transition between to positions.
The key is to add the transition rule to your element (#robot), where you set the property you want to animate, the duration of the animation, easing function etc. See documentation for more examples.
Note that if you use the all keyword in the mentioned rule for shorthand convenience, it is adviced to specify which property you want to animate in the additional transition-property rule. This is for performance reasons.
In my example I'm using :hover to trigger the animation, but it might as well be when the page loads or when a certain class is added to your element by some JavaScript.
Hope it helps!
.box {
width: 500px;
height: 150px;
position: relative;
padding: 10px;
border: 5px solid green;
}
.cat {
position: absolute;
top: 50px;
left: 50px;
transition: all 1s ease-in;
transition-property: top, left;
}
.box:hover .cat {
top: 10px;
left: 300px;
}
<div class="box">
Hover me!
<img class="cat" src="https://placekitten.com/100/100" alt="A cat">
</div>
Yes, you can do it by simple using css.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
/* Standard syntax */
#keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
</style>
<body>
<img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">
<?php ?>
</body>
</html>
Related
I'm creating a scene with a bunch of scrolling layers (foreground, midground, background etc...) but annoyingly I get a flicker on Safari (14.0.3) when the animation restarts. This doesn't occur on Chrome or Firefox.
I've created a minimum reproducible example here:
https://brendon.github.io/safari_flicker/index.html
Here's the code:
.animation {
position: relative;
height: 395px;
background-image: linear-gradient(#1b9dd9, #00b6ed 44%, #ffe56c 75%);
}
.animation .scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
}
.animation .scrollingAnimation:before {
content: "";
position: absolute;
height: 100%;
width: 200%;
}
.animation .foreground:before {
/* Dimensions: */
/* width: 1696px; */
/* height: 74px; */
min-width: 6784px;
background-image: url("https://brendon.github.io/safari_flicker/foreground.png");
background-position: left bottom -11px;
background-repeat: repeat-x;
background-size: auto 74px;
transform: translateX(-1696px);
animation: foreground 10s linear infinite;
}
#keyframes foreground {
0% {
transform: translateX(-1696px);
}
to {
transform: translateX(-3392px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
</body>
</html>
Here is a video of the issue:
https://github.com/brendon/safari_flicker/raw/main/flicker_video.mp4
I've tried many things to get rid of the issue. It seems to sometimes go away depending on the window width, but I'm looking for a solid solution :D
The issue also exists on iOS Safari.
I should mention that I don't want to animate the background-position property as this causes performance problems and isn't accelerated by the GPU.
Have you thought about using 2 elments with the same image and animation, and offsetting - using delay - the first elements animation by -duration / 2 ?
The idea being that at all times there's one of them on screen and any render delay shouldn't be visible.
See below, I'm animating two pseudo elements.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.animation, .foreground {
height: 100%;
width: 100%;
background: black;
}
.foreground:before, .foreground:after {
height: 100%;
width: 200%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 50vmin;
}
.foreground {
position: relative;
overflow-x: hidden;
}
.foreground:before {
content: 'A';
background: red;
animation: 10s linear -5s infinite foreground;
}
.foreground:after {
content: 'B';
background: blue;
animation: 10s linear 0s infinite foreground;
}
#keyframes foreground {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
I ended up using GSAP fromTo() to manage the transition work instead of relying on the CSS animation:
<div class="foreground scrollingAnimation"><div></div></div>
gsap.fromTo(
'.foreground > div',
{ xPercent: -25 },
{ xPercent: -50, duration: 10, repeat: -1, ease: 'none' }
)
.scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
> div {
position: absolute;
height: 100%;
}
}
.foreground {
> div {
width: calc(1696px * 4);
background: {
image: url("https://brendon.github.io/safari_flicker/foreground.png");
position: left bottom;
repeat: repeat-x;
size: auto 74px;
}
}
}
It breaks down on very wide screens, but really, if you're rocking a 6000px wide window, good luck to you sir.
The way GSAP animates is that it changes the translateX value via javascript during a requestAnimationFrame (I think) so it's nice and smooth, and the flicker problem doesn't exist in this context.
I would like to create some css animation on the home page of my site, with some notes falling.
Here is the example: http://labandallonnaise.org/joomla/(link no longer demonstrates behavior)
We can see that the notes are falling, then we have nothing before the next sequence.
Here is the code
.notes-wrapper {
overflow: hidden;
height: 630px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin-top: -75px;
margin-bottom: -75px;
margin-left: -500px;
margin-right: -500px;
}
.notes {
background: url("gantry-theme://custom/images/background.svg") center !important;
height: 6300px;
animation: fall 10s linear infinite;
overflow: hidden;
z-index: 0;
background-repeat: repeat;
background-size: cover;
top: 0px;
}
.notes img {
animation: none;
background: transparent;
}
#keyframes fall {
0% {
transform: translateY(-1050px);
}
}
<div class="notes-wrapper">
<img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
<div class="notes"> </div>
</div>
how can I have continuous animation?
It depends on exactly what effect you want with various viewport aspect ratios.
Whatever the details, you need two copies of the SVG so that you don't get a gap when one has reached the bottom and starts again.
Here's one way to get continuity which puts before and after pseudo elements on the notes div both of which animate down the full height of the viewport. One starts in the viewport, the other above it.
This is a simplistic way of doing it as it doesn't require you to know anything about the aspect ratio of the background image. It would be possible to get better control and produce different results depending on what you'd like to happen on narrow or wide devices. For example, should the notes always fit in completely horizontally, however small they then go? Should there always be only one copy of the background however wide the device and so on.
.notes-wrapper {
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}
.notes {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.notes::before, .notes::after {
content: '';
background-image: url("https://ahweb.org.uk/background.svg");
position: absolute;
height: 100%;
width: 100%;
animation: fall 10s linear infinite;
overflow: hidden;
z-index: -1;
background-repeat: repeat no-repeat;
background-size: auto 100%;
background-position: center;
}
.notes::before {
top: -100%;
}
.notes::after {
top: 0;
}
#keyframes fall {
100% {
transform: translateY(100vh);
}
}
<div class="notes-wrapper">
<img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
<div class="notes"></div>
</div>
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I think it's a browser bug.
the container background can be seen at the borders.
It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
overflow: hidden;
}
.image {
background-image: inherit;
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
The issue appears to be caused by the negative margin and 110% width and height settings in the .image css class. I assume you're doing that to try and maintain a crisp edge when blurred. I modified those and the snippet below shows the result. Hopefully it will be useful:
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: 0;
width: 100%;
height: 100%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I'm working on a Knob Component that uses a Spritesheet. I need it to be responsive, relative to the screen size.
Using CSS Sprites I'm able to get the desired behaviour at maximum Sprite size.
The problem comes when the element is scaled down. Then I get a random UP or DOWN single pixel offset on the background-position that gives like a rumbling impression.
Here you have an example Snippet to see this behaviour live:
<html>
<head>
<style type="text/css">
.container{
float:left;
height: 10%;
width: 20%;
}
.sprite{
background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
max-width: 100%;
background-size: 100%;
background-position: 0 0; background-size: 100%;
animation: play 10s steps(127) infinite;
}
#keyframes play {
100% { background-position: 0 100%; background-size:100%; }
}
</style>
</head>
<body>
<div class="container">
<img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>
Note that I based my responsive beahaviour on this site: http://responsive-css.spritegen.com/
Additionally, here you have a JSFiddle
I've also tried other approaches like working in absolute pixel units, and then resizing using functions like:
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
And the same problem happens when the Scaling factor is not an exact divisor:
For example:
0.5, 0.75, 0.2 WORKS
0.3, 0.7, 0.8 OFFSET PROBLEM
From your question, I understood that you want to make this responsive and here is my answer:
try putting that in the iframe in the following code.
* {
padding: 0px;
border: 0px;
margin: 0px;
}
html {
width: 100vw;
height: 100vh;
}
body {
width: 100vw;
background-color: rgb(19, 19, 19);
}
div#mainContainer {
margin: calc(50vh - 50vw) 0px;
width: 100vw;
height: 100vw;
background-color: rgb(180, 180, 180);
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
}
#media only screen and (orientation: landscape) {
div#mainContainer {
margin: 0px calc(50vw - 50vh);
width: 100vh;
height: 100vh;
}
}
<body>
<div id="mainContainer">
<iframe src="./iframe.html">
</iframe>
</div>
</body>
And this is iframe.html
* {
overflow: hidden;
}
.container{
float:left;
height: 100%;
width: 100%;
}
.sprite{
background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
width: 100%;
height: 100%;
background-size: 100%;
background-position: 0 0; background-size: 100%;
animation: play 10s steps(127) infinite;
}
#keyframes play {
100% { background-position: 0 100%; background-size:100%; }
}
<html>
<head></head>
<body>
<div class="container">
<img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>