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.😉
Related
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've been coding a website of mine, and I encountered this absolutely annoying problem!
My CSS animations, for my 404 page aren't working. All of the other style definitions work perfectly though, EXCEPT animations. This leads me to believe, that something is wrong with my CSS. If you need extra code, I'm willing to provide you it. My website is using Node.JS with a framework called Express to host the website. Again, the rest of the CSS works fine EXCEPT the animations. Here is the hellhole that is my CSS:
#font-face {
font-family: 'Consolas';
src: url("/fonts/consolas.woff") format("woff");
};
/* #keyframes slidein {
0% {margin-top:50px;opacity:0;filter:blur(5px);}
100% {margin-top:60px;opacity:1;filter:blur(0px);}
}; */
#keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
padding: 0 auto;
margin: 0 auto;
}
body {
background-color: #232323;
color:white;
font-family: 'Consolas';
}
.content {
margin: auto;
text-align: center;
width: 100%;
height: 100%;
}
.t404 {
margin-top:50px;
opacity:0;
filter:blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: 1s ease-out slidein;
-webkit-animation: 1s ease-out slidein;
}
.t404text {
color: white;
}
Here's my HTML as well:
<!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="/resources/style.css">
<title>le testpage - 404</title>
</head>
<body>
<div class="content">
<p class="t404">404</p>
<p class="t404text">The page you were looking for was, unfortunately, not found.</p>
</div>
</body>
</html>
Can someone help me please?
Your keyframes definition is not being seen because you have a semi colon after the definition before.
Here it is without that ;
#font-face {
font-family: 'Consolas';
src: url("/fonts/consolas.woff") format("woff");
}
/* #keyframes slidein {
0% {margin-top:50px;opacity:0;filter:blur(5px);}
100% {margin-top:60px;opacity:1;filter:blur(0px);}
}; */
#keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
padding: 0 auto;
margin: 0 auto;
}
body {
background-color: #232323;
color: white;
font-family: 'Consolas';
}
.content {
margin: auto;
text-align: center;
width: 100%;
height: 100%;
}
.t404 {
margin-top: 50px;
filter: blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: 1s ease-out slidein;
-webkit-animation: 1s ease-out slidein;
}
.t404text {
color: white;
}
<div class="content">
<p class="t404">404</p>
<p class="t404text">The page you were looking for was, unfortunately, not found.</p>
</div>
Try using this:
I think the problem is that you are running your animation for just one second and also once. Try making its animation-iteration-count infinite.
#keyframes slidein {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.t404 {
margin-top:50px;
transition: opacity .3s;
filter:blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: slidein 2s infinite ease-out;
-webkit-animation: slidein 2s infinite ease-out;
}
I'm making my coming soon webpage but the problem is animation is not working. How can I fix it?
HTML code-
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>
<body>
<div id="topline">
<h4> Our new site is </h4>
<a class="c">COOMING SOON</a>
</div>
<p class="h">hi</p>
</body>
</html>
the css code-
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
html {text-align: center;}
#topline {margin-top: 8%;
color: white;
font-size: 35;
}
.c{animation-duration: 4s;
animation-delay: 1s;
animation-name: cos;
animation-iteration-count: 2;
color: #66ccff;
font-size: 80px;
}
#keyframes cos {
0% {color: #66ccff; left: 0px;}
25%{color: #ff33cc; left: -800px;}
75%{color: #3333ff; left: 800px;}
100%{color:#66ccff; left: 0px;}
}
#keyframes h {
from{top: 0px;}
to{top: 80px;}
}
.h {animation-name: h;
animation-iteration-count: 3;
position: relative;
color: blueviolet;
}
well, href is privacy as I have not lunched it. ignore the title.I'm a learner so maybe some typo error but I have checked the browser console. thanks.
You haven't added animation-duration in the above code.And you have used keyframes before the animation code.. Here's the answer
body {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
html {
text-align: center;
}
#topline {
margin-top: 8%;
color: white;
font-size: 35;
}
.c {position:relative;
animation-duration: 4s;
animation-delay: 1s;
animation-name: cos;
animation-iteration-count: 2;
color: #66ccff;
font-size: 80px;
}
#keyframes cos {
0% {
color: #66ccff;
left: 0px;
}
25% {
color: #ff33cc;
left: -800px;
}
75% {
color: #3333ff;
left: 800px;
}
100% {
color: #66ccff;
left: 0px;
}
}
.h {
animation-name: h;
animation-iteration-count: 3;
animation-duration: 3s;
position: relative;
color: blueviolet;
}
#keyframes h {
from {
top: 0px;
}
to {
top: 80px;
}
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>
<body>
<div id="topline">
<h4> Our new site is </h4>
<a class="c">COOMING SOON</a>
</div>
<p class="h">hi</p>
</body>
</html>
I am a newbie i just want to add fadeout in my text moving after it already finish moving. but the problem is i already put the #keyframe fadeout. and .fadeout. but it didnt work. Any help please? Thank you. This is the code.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 8s;
-webkit-animation: move 8s;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
Unless you've got a reason to split it up you could just put it all in the same animation by adding one more step to it like this:
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 3s forwards;
-webkit-animation: move 3s forwards;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
opacity: 1;
}
to {
opacity: 0;
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
This may seem like such a noob question, but I'm quite new with HTML and CSS.
Anyways, my problem is that on my computer, the website I'm working on looks totally fine zoomed in at 100%, normal. When I zoom out, the image on my "loading screen" moves around the screen and same when I zoom in.
Also, on other computers, the image is to the left of the text "Loading..." and some computers have it to the right of the text. Also on mobile, the background and text are way at the top of the screen while the image is in the middle of the screen on a white background.
The website page can be seen here at http://santatracking.net/loading.html
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<META HTTP-EQUIV="Refresh" CONTENT="1.5;URL=homevillage.html">-->
<script src="script.js"></script>
<link rel="stylesheet" href="loadingstyle.css">
<link rel="preload" href="styles.css">
<link rel="icon" type="favicon/png" href="http://santatracking.net/wp-content/uploads/2016/01/cropped-Team-yantsu-logo-transparent.png">
<title>SantaTrackingLive</title>
</head>
<body>
<div id="wrapper">
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
<div id="loading">
<img class="image" src="loadingimg.png" alt="" width="200" height="200">
</div>
</div>
</body>
</html>
Here is my CSS code
#font-face {
font-family: mo;
src: url(museo.ttf);
}
body {
font-family: mo;
background-image: url("bg.png");background-repeat: repeat;
background-size: cover;
}
.text {
position: absolute;
width: 300px;
height: 70px;
font-size: 30px;
margin: 426px 0 0 460px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
#loading {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -90px 0 0 -100px;
-webkit-animation:spin 1.25s linear infinite;
-moz-animation:spin 1.25s linear infinite;
animation:spin 1.25s linear infinite;
outline: 1px solid transparent; -->
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#wrapper {
height: auto;
width: 1200px;
margin: 0 auto;
}
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
If any one could help me out on this, that'd be great. Sorry again for the possible noob sounding question haha
Thanks again
You need to use JavaScript for that because your browser does not know the resolution of your screen, for eg your computer is 1080 during full size but when you resize to smaller width and moves to next line. You have to use window.width to get width of your window and use DOM to manipulate HTML