I have an image of waves that takes about the bottom third of the screen(not the background image) that I want to run on an infinite loop from right to the left but using css. I have tried different things but so far have been unable to make it work.
I have defined the img src on the HTML, but if needed i can do it on the css file.
Any help or suggestions on how to do it are appreciated.
CSS
body {
border: 2px solid black;
width: 700px;
background-image: url("./cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
.waves {
height: 380px;
width: 700px;
position: relative;
top: -300px;
background-repeat: repeat-x;
animation: animatedImage 20s linear infinite;
}
#keyframes animatedImage {
from {background-position: 0 0;}
to {background-position: 100% 0;}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Escape the Cave</title>
<link rel="stylesheet" href="./jogo.css">
</head>
<body>
<div>
<img class="waves" src="./ondas.png">
</div>
<script src="jogo.js"></script>
</body>
</html>
I moved class "waves" on div in which image is putted, because it's easier to operate.
Here's CSS
body {
border: 2px solid black;
width: 700px;
background-image: url("./cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
.waves {
height: 380px;
width: 700px;
position: relative;
top: -300px;
background-repeat: repeat-x;
animation: animatedImage 5s linear infinite;
}
#keyframes animatedImage {
0% { left: 0;}
50%{ left : 100%;}
100%{ left: 0;}
}
HTML
<div class="waves">
<img src="https://styles.redditmedia.com/t5_2tugi/styles/communityIcon_7yzrvmem0wi31.png">
</div>
Related
i have a html page with gradient transition background,
the background colors change automatically after 5 seconds and hense creating a animation. I am using css & key frames for this.
I am converting this html page to a AMP page.
This transition works in plain html pages, but shows the first color only when started in am.
how can i get it working?
working Code-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body style="background-color:#2c3333;"></body>
</body>
</html>
Style.css-
.user {
display: inline-block;
width: 170px;
height: 170px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
body {
font-size: 1em;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
}
.head-div {
text-align: center;
color: #000000;
/* padding:0%;
padding-top:7%;
padding-bottom:300%; */
}
img {
pointer-events: none;
display: inline-block;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
object-fit: cover;
}
.link-div {
padding: 10%;
padding-top: 1%;
padding-bottom: 1%;
color: #2c3333;
}
.alink {
text-align: center;
margin-top: 1px;
padding: 20px 0;
max-width: 590px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
color: #2c3333;
text-decoration: none;
}
.alink:hover {
color: #ffffff;
background-color: #54bab9;
border: 2px solid;
border-color: #ffffff;
}
.copyright {
text-align: center;
color: #ffffff;
}
.getlink {
font-size: 17px;
text-align: center;
color: #ffffff;
}
.footer {
position: fixed;
bottom: 25px;
left: 0;
right: 0;
text-align: center;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
SO after some Research and experimenting with AMP, finally i came with an answer to my own problem,
Posting this here so that if any one gets the same problem, Gets a solution.
So the problem was that i was having a AMP webpage and i wanted to get the background Gradient animation working like it is working in the index.html file,
i was not, but i have solution.
it was no working because we were trying to manipulate body of html using css,. which works in html, but not in css.
The solution is to create a div in body tag and some changes in amp-style.
.divanim is the div here
Here is the working AMP page-
index.amp.html-
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashutosh_7i</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%;
}
#keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="divanim">
//body with gradient
</div>
</body>
</html>
amp animation on their website is very confusing , alteast for me, but i got the solution anyways.😉
Hello i tried out everything but don´t find the error.
I have a css gradient-animation running on my background and would like to put a mask over it. The mask consists of a circle in the centre of the screen.
I would like that the animation running in the background is only visible inside the circle.
This is my code so far:
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mask1">
<div class="background"></div>
</div>
</body>
</html>
The animation is running fine but i don´t see the mask.
Thanks for any help.
Something like this?
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="mask1">
<div class="background"></div>
</div>
I'm a novice and in the process of creating a site in HTML and CSS. My problem is that I put an animation scrolling an image to infinity behind a transparent text (not completely transparent) but I would also like to have the possibility of making this text rainbow. These two animations work perfectly independently but once I put them in the same code, the background image remains static, the text is no longer centered but on the left, and the rainbow text works well. So I would like some help to get everything working properly at the same time.
The HTML :
body {
margin: 0;
font-family: arial;
padding: 0;
background-color: black;
}
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("Images/istockphoto-922764830-612x612.jpg");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
animation: animate2 6s linear 0s infinite;
}
#keyframes animate1 {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animate2 {
from {
color: rgba(102,102,255,.1);
}
10% {
color: rgba(0,153,255,.1);
}
50% {
color: rgba(0,255,0,.1);
}
75% {
color: rgba(255,51,153,.1);
}
100% {
color: rgba(102,102,255,.1);
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
Yes, it's impossible, you are overriding the animation property.
You can try one of two things:
Use the color animation on the text-container
Combine the animations into one
Like Konrad says, you could combine animations, I made this snippet with your code:
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("http://placekitten.com/400/400");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
}
#keyframes animate1{
from {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
10% {
color: rgba(0,153,255,.1);
}
25%{
background-position: 100% 0;
}
50% {
color: rgba(0,255,0,.1);
background-position: 0 0;
}
75% {
color: rgba(255,51,153,.1);
background-position: 100% 0;
}
100% {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
I want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.
I am trying to overlay an image on top of this css animation. I just want it to sit right in the middle of it. I have tried playing with the z-index and different positions, but I can't seem to get it to show up. I would also like to get the colors to change when the mouse moves over different spots.
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://image.ibb.co/cbYTjf/cloud.png);
animation: animate 60s linear infinite;
z-index:1;
}
.logo{
background-image:url(https://i.vgy.me/7FcUbx.jpg)
z-index: 10;
position:absolute;
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class= "container">
</div>
<div class="background-color"></div>
<div class="clouds">
<div class="logo">
</div>
</body>
There are a number of ways you could achieve this. I would look into using a pseudo-element for the overlay or something but here is one way to do it.
The main problem that I saw was that you needed to define height and width for the logo.
Codepen if you prefer:
https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100
body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://image.ibb.co/cbYTjf/cloud.png');
animation: animate 60s linear infinite;
z-index: 1;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
height: 20%;
width: 20%;
background: url('https://i.vgy.me/7FcUbx.jpg') center center / cover;
z-index: 10;
transform: translate(-50%, -50%);
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class="container">
<div class="clouds"></div>
<div class="logo"></div>
</div>
</body>
You can create the effect by using multiple backgrounds and applying it to the body - note that the background specified first will come on top in the stacking order. See demo below:
body {
margin: 0;
min-height: 100vh;
background: url(https://i.vgy.me/7FcUbx.jpg) center / 100px auto no-repeat,
url(https://image.ibb.co/cbYTjf/cloud.png) right / cover no-repeat,
linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%) center / cover no-repeat;
animation: animate 60s linear infinite;
}
#keyframes animate {
to {
background-position: center, left, center;
}
}