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>
Related
I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
I don't think I double posted but if I did, sorry.
I have a problem with my CSS code:
I want the second text to show up when the first animation is finished.
So it will be something like:
First animation starting, second text hidden, then first animation finished, and then second text shown.
I think the problem are coming from the blinking animation (second_text_anim)
Here is my HTML code:
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
background: white;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
text-transform: uppercase;
display: block;
}
.first_text {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the
end of the first animation */
.second_text {
font-size: 30px;
color: darkcyan;
display: block;
animation: second_text_anim 1s 3s linear infinite;
}
#keyframes first_text_anim {
0% {
color: black;
margin-bottom: -40px;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
50% {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="first_text">First animation</span>
<span class="second_text">Second animation, should be displayed at the end </span>
</div>
</body>
</html>
Your animation-delay works but you also need to set animation-fill-mode.
Also, Change 50% to from for the second title, so it will set its initial state to opacity: 0;.
One last thing: To enable your blinking animation, add alternate to the shorthand.
This is the final result:
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background:white;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container span{
text-transform: uppercase;
display: block;
}
.first_text{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{
font-size: 30px;
color: darkcyan;
display: block;
animation:second_text_anim 1s 3s linear infinite alternate both;
}
#keyframes first_text_anim {
0%{
color: black;
margin-bottom: -40px;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
from {
opacity: 0;
}
}
<div class="container">
<span class="first_text"> > First animation </span>
<span class="second_text"> > Second animation, Should be displayed at the end </span>
</div>
you can use animation-delay.
here the code that iterate the second text every 3s
also this value order is not correct:
animation:second_text_anim 1s 3s linear infinite;
in animation short method you must order value, like this example:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div {
animation: example 5s linear 2s infinite alternate;
}
so in your code you must use it like this:
animation:second_text_anim 3s linear 4s infinite;
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background:white;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container{
text-transform: uppercase;
}
.first_text{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{
font-size: 30px;
color: darkcyan;
display: block;
opacity:0;
animation:second_text_anim 3s linear 4s infinite;
}
#keyframes first_text_anim {
0%{
color: black;
margin-bottom: -40px;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
50% {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="first_text"> > First animation < </span>
<span class="second_text"> > Second animation, Should be displayed at the end < </span>
</div>
</body>
</html>
I need do the next animation of text:
People dissapears like a flip effect David Walsh Flip Card Effect, and the effect faces every 2 seconds and it will be repeating, contents the text: "Robots", "Animals", "Things" for example, with the flip animation.
Any idea?
One example of flip cards is the next: Stackoverflow How to flip multiple divs using CSS?
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
.divi {
line-height: normal;
color: black;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
.div1 { /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */
animation: showup 7s forwards;
font-family:'Roboto';
font-weight:300;
font-size:28px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
}
.div2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
width: 0px;
animation: reveal 7s forwards;
animation-iteration-count: 1;
display: inline-block;
white-space: nowrap;
}
.div2 span {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
margin-left: -355px;
animation: slidein 7s forwards;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: auto;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
width: auto;
}
}
<div class="divi" align="center">
<div class="div1">Hello</div>
<div class="div2">
<span>People</span>
</div>
<div class="div3">
<span>Robots</span>
</div>
<div class="div4">
<span>Animals</span>
</div>
<div class="div5">
<span>Things</span>
</div>
</div>
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;
}
I need to have span with text aligned in the center.
Previously I have used line-height for this purpose, but in this case the text for some items are longer and this doesn't work any more.
JSFiddle: http://jsfiddle.net/4jSdu/
HTML:
<ul>
<li><a><span>Short</span></a>
</li>
<li><a><span>Why Should I Monitor?</span></a>
</li>
</ul>
CSS:
ul {
position: relative;
overflow: hidden;
}
span {
background-color: rgba(216, 25, 11, 0.75);
display: block;
height: 70px;
line-height: 70px;
width: 135px;
color: black;
text-align: center;
/*margin: auto 0;*/
font-weight: bold;
font-size: 15px;
position: absolute;
bottom: 14px;
}
li, a {
width: 135px;
height: 100px;
display: inline-block;
}
EDIT:
I want to note that span element has value bottom: 14px. THere is also animate effect on this span. when page loads span has value bottom: -70px (container has overlfow: hidden,s o this span is not seen) and then it appears (using .animate) and goes to bottom: 14px. So the sollution should consider this.
I cannot get this animate effect working in jsfiddle (http://jsfiddle.net/pr5cL/), but it works on my page that is locally created.
$("ul li:not(.img_active)").mouseenter(function() {
$(this).find("span").css("bottom","-55px");
$(this).find("span").animate({bottom:15},500);
}).mouseleave(function(){
$(this).find("span").animate({bottom:-70},500);
});
Here is link: http://www.sheerdigitaltest.net/janus/
Something like this maybe?
span {
display: inline-block;
line-height:1.25;
vertical-align:middle;
width: 135px;
color: black;
text-align: center;
font-weight: bold;
font-size: 15px;
}
a {
background-color: rgba(216, 25, 11, 0.75);
height: 70px;
line-height: 70px;
font-size:0;
overflow:hidden;
}
li, a {
width: 135px;
display: inline-block;
vertical-align:top;
}
span {
-webkit-animation: slidein 2s ; /* Safari 4+ */
-moz-animation: slidein 2s ; /* Fx 5+ */
-o-animation: slidein 2s ; /* Opera 12+ */
animation: slidein 2s ; /* IE 10+ */
}
#-webkit-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-moz-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-o-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
Jsfiddle
No IE7 or earlier support. Animation support as per comments.