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>
Related
Hello everyone.
I have started making a small app in Electron, and want to make a loading screen.
But every time I add the animation to the container div, it gives its background color weird color banding.
Here's an image of it.
Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.
Here's an image with the animation disabled.
What I tried:
Ran the website in Edge, did produce the color banding.
Ran the website in the snippet, did not produce the color banding.
Tried setting the background color in the animation itself, did not fix the problem.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&family=Roboto&display=swap');
:root {
--main1: #282b30;
--main2: #1e2124;
--main3: #16181a;
--titleFont: 'Nunito', sans-serif;
--textFont: 'Roboto', sans-serif;
--textColor: #ffffff;
}
* {
font-family: var(--textFont);
color: white;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
.transitionContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--main2);
color: var(--textColor);
font-size: 500%;
animation-name: hideTransition;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-delay: 1.25s;
animation-fill-mode: both;
opacity: 1;
}
#keyframes hideTransition {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
}
#keyframes showTransition {
from {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
to {
transform: scale(1);
opacity: 1;
z-index: 0;
}
}
.logoText {
position: absolute;
top: 50%;
left: 50%;
margin-left: -49.258px;
margin-top: -96px;
}
.loadingBarBack {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
background-color: var(--main3);
}
.loadingBarFront {
width: 0%;
height: 100%;
background-color: limegreen;
animation: loading 1s;
animation-fill-mode: forwards;
}
#keyframes loading {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="./index.js" defer></script>
</head>
<body>
<div class="transitionContainer">
<h1 class="logoText">R</h1>
<div class="loadingBarBack">
<div class="loadingBarFront"></div>
</div>
</div>
</body>
</html>
Thanks for any help in advance!
Figured it out!
Apparently animation-fill-mode: both; caused some of the div to go transparent before the animation even played.
Setting it to animation-fill-mode: forwards; fixed it.
I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}
You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
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 a novice in html5 and css3 and I am just playing around with the different css3 animation features. Could anyone kindly point out the error in the code below? The movement from left 0px to left 200px isn't working.
<!doctype html>
<html>
<head>
<title>
Experiment: animation with movements
</title>
<style>
footer{
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {left:50px;}
to {left:200px;}
}
#keyframes mymove {
from {left:50px;}
to {left:200px;}
}
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
Add position: relative; to the footer CSS
footer {
position: relative;
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
<footer></footer>
Hello I have a little web page and my problem is that 1 div cuts out a part of my second div:
As you can see the 3 gets cut I think its a CSS Problem but I don't know where...
HTML(just the part with the 2 divs):
* {
cursor: none !important;
overflow: hidden;
}
.number {
height: 60%;
width: 100%;
z-index: 2;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 500pt;
margin: 0;
padding:0 background-color: transparent;
}
p {
font-size: 70pt;
margin: 0;
padding: 0;
}
.names {
position: relative;
bottom: 0;
left: 0;
z-index: -1;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0);
width: 400px;
height: 40%;
text-align: center;
}
body {
background-color: black;
color: white;
font-family: arial;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.lauftext {
height: 100%;
font-size: 70pt;
}
#keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
#-webkit-keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
.lauftextdiv {
height: 100%;
}
.lauftext {
height: 200pt;
position: absolute;
font-size: 200pt;
top: 50%;
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 7s linear infinite;
webkit-animation: marquee 7s linear infinite;
}
#keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-o-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-moz-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.number_full {
text-align: center;
animation: rotate 7s linear infinite;
-webkit-animation: rotate 7s linear infinite;
-o-animation: rotate 7s linear infinite;
-moz-animation: rotate 7s linear infinite;
}
.number_full h1 {
text-shadow: 0 0 100px #777;
transform: rotateX(20deg);
padding: 100px;
font-size: 600pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width" , inital-scale=1.0>
<link rel="stylesheet" href="../layouts/style.css">
<script src="../reload.js"></script>
<title>3</title>
</head>
<body>
<div class="number">
<h1>3</h1>
</div>
<div class="names"> Marc
...
</div>
</body>
</html>
I guess you should add a position property to the .number too. And try to remove the height property, or set it to 100%.
.number {
position: relative;
z-index: 2;
height: 60%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
* {
cursor: none !important;
overflow: hidden;
}
.number {
width: 100%;
z-index: 2;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 300pt;
margin:0;
padding:0
background-color: transparent;
}
p {
font-size: 70pt;
margin: 0;
padding: 0;
}
.names {
position: relative;
bottom: 0;
left: 0;
z-index: -1;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0);
width: 400px;
height: 40%;
text-align: center;
}
body {
background-color: black;
color: white;
font-family: arial;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.lauftext {
height: 100%;
font-size: 70pt;
}
#keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
#-webkit-keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
.lauftextdiv {
height: 100%;
}
.lauftext {
height: 200pt;
position: absolute;
font-size: 200pt;
top: 50%;
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 7s linear infinite;
webkit-animation: marquee 7s linear infinite;
}
#keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-o-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-moz-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-webkit-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
.number_full {
text-align: center;
animation: rotate 7s linear infinite;
-webkit-animation: rotate 7s linear infinite;
-o-animation: rotate 7s linear infinite;
-moz-animation: rotate 7s linear infinite;
}
.number_full h1 {
text-shadow: 0 0 100px #777;
transform: rotateX(20deg);
padding: 100px;
font-size: 600pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width" , inital-scale=1.0>
<link rel="stylesheet" href="../layouts/style.css">
<script src="../reload.js"></script>
<title>3</title>
</head>
<body>
<div class="number">
<h1>3</h1>
</div>
<div class="names">
Marc
...
</div>
</body>
</html>
Your missing a closing tag on your h1, it should be.
<div class="number">
<h1>3</h1>
</div>
The number is not cut off by the other div, it is cut off by:
.number {height: 60%;}
Change this to:
.number {height: 100%;}
This will fix it. If you need to have the height at 60%, you have to make the overflow visible with:
.number {height: 60%; overflow:visible;}
Change this part of the CSS
overflow: visible;
* {
cursor: none !important;
overflow: visible;
}