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;
}
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'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'm struggling to understand why my H1 does not show up. It is covered by a div. The weird part is that the H1's parent div is visible if I change background color to something else than transparent.
Input tag inside the same div is always visible as well. Only H1 is problematic.
Here is the link to the code: H1 does not show up
And code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1> Test </h1>
<input>
</div>
</div>
</div>
</body>
</html>
SCSS:
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
transform: scale(1.5,1.5);
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
}
}
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 1 !important;
position: absolute !important;
height: 300px !important;
top: 50% !important;
width: 100% !important;
margin: 0 auto !important;
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
}
Can anyone help me to understand why this is happening? Much appreciate it.
It's because .outerContainer .imageSlider is more bigger than it's parent (.outerContainer). So it is outside of outerContainer and parent has overflow: hidden .
You can overcome this by add transform-origin for .outerContainer .imageSlider .
Like this
.outerContainer .imageSlider {
transform-origin: left center;
}
Here is the working Snippet
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
}
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0, 1, 0, .5)infinite;
transform: scale(1.5, 1.5);
transform-origin: left center;
}
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0, 1, 1, .8) infinite;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 1 !important;
position: absolute !important;
height: 300px !important;
top: 50% !important;
width: 100% !important;
margin: 0 auto !important;
}
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1> Test </h1>
<input>
</div>
</div>
</div>
The issue is the transform: scale on .imageslider, the content is exceeding the width of its parent. Then also having overflow: hidden; is trimming anything outside the element.
Try this.
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
}
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
transform: scale(1.5,1.5);
}
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
}
}
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 9999 !important;
position: absolute !important;
height: 300px !important;
top: 50%;
width: 100% !important;
margin: 0 auto !important;
left: 50%;
right: 50%;
}
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1>
Test
</h1>
<input>
</div>
</div>
</div>
</body>
</html>
So I have just started to learn HTML/CSS and I am trying to create a website for a magazine I'm putting together. However, when I try adding two links to two different pieces of text, one is only partially clickable and the one below is not.
I am thinking it has something to do with my wrapper or the photos I have right beside the text because when I align them more right, they're now clickable. Seems to be like something is blocking part of the word (link) to be clicked on.
I have tried making a sidebar instead but I still get the same result. I tried moving my code around for different results, but still cannot figure it out.
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
.slider is overlapping the links since you're using a negative margin to move the links back up on the page.
A simple fix is to give the links a z-index by assigning position: relative
.ATA, .B {
position: relative;
}
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
I'm animating line with css3 from width:0 to width:100%. At the moment is moving from left to right, but I want to make it to start from right to left. Is this posible at all with keyframes?
here is my code
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
-webkit-animation: dude .75s 1 forwards;
-moz-animation: dude .75s 1 forwards;
-o-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-moz-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-o-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
See this FIDDLE
add
.content .line {
right: 0;
}
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
right: 0;
-webkit-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
Try to animate "left" property instead of width as your element already has position set to absolute.
#keyframes dude {
0% {
left: 100%;
}
100% {
left: 0;
}
}
FIDDLE
change animation-direction to reverse
animation: dude .75s 1 reverse;