my css animation run well but when the animation is fisnished, i can't interacting with anchor or another interaction on my website...
hr{
height: 5px;
position: absolute;
top:50%;
margin: 0;
padding: 0;
background: black;
z-index: 4;
-webkit-animation: ligne 5s;
-webkit-animation-fill-mode: forwards;
}
#background{
z-index: 3;
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-image: linear-gradient(white, #EFF0FF);
-webkit-animation: fond 5s;
-webkit-animation-fill-mode: forwards;
}
#logo{
color: red;
line-height: 100%;
position: absolute;
z-index: 4;
font-weight: bold;
top: 40%;
left: 40%;
-webkit-animation: logo 5s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes ligne{
0%{width:0%;}
60%{width: 99.9%;}
80%{width: 99.9%;opacity: 1;}
100%{width: 99.9%;opacity: 0;}
}
#-webkit-keyframes fond{
0%{background-image: linear-gradient(white, #EFF0FF);}
80%{background-image: linear-gradient(white, #EFF0FF);}
100%{background: transparent;}
}
#-webkit-keyframes logo{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: 1;}
100%{opacity: 0;}
}
I'm only on HTML5/CSS3, so please don't reply solution in JS or other, thanks :).
Related
CSS ::after if visible at the start then disappearing in the middle and reappearing at the end why? I want it to be visible throughout the animation equally like a horizontal slider
Here is my code:
.btn {
all: inherit;
position: relative;
font-size: 6rem;
}
.btn::after {
overflow: visible !important;
content: "";
position: absolute;
top: 0;
left: -5%;
height: 100%;
width: 2%;
background-color: greenyellow;
animation-name: LeftToRight;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes LeftToRight {
0% {
left: -5%;
}
100% {
left: 105%;
}
}
<button class="btn">UNIVERSE</button>
I have a Windows 10 Simulator script made mostly out of CSS Animations. I successfully created the color gradient but now I have no clue on how to do the next step.
Main HTML and CSS
<html>
<head>
<title>Windows 10 Simulator</title>
<link href="https://fonts.googleapis.com/
css?family=Noto+Sans|Open+Sans|PT+Sans|
Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<style onload>
html, body{
margin: 0;
padding: 0;
background-color: #000;
}
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #000000,
#000000, #0095f0 ,#0095f0, #0095F0, #ff0000,
#ff0000, #0095f0);
background-size: 1800% 1800%;
animation-iteration-count: 0;
animation-fill-mode: forwards;
animation: rainbow 30s ease 1;
}
#keyframes rainbow {
0% {background-position: 0% 0%}
10%{background-position: 100%% 15%}
20%{background-position: 100% 30%}
30%{background-position: 100% 45%}
40%{background-position: 100% 60%}
50%{background-position: 100% 85%}
60%{background-position: 100% 90%}
70%{background-position: 100% 100%}
80%{background-position: 100% 90%}
90%{background-position: 100% 85%}
80%{background-position: 100% 45%}
100%{background-position:100% 15%}
}
span {
margin-top: 250px;
color: #fff;
font-size: 30px;
font-family: 'Raleway', sans-serif;
animation-name: flickerAnimation;
animation-duration: 5s;
animation-iteration-count: 1;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
#message{
font-size: 10px;
color: #fff;
animation-name: alertFade;
animation-duration: 4s;
opacity: 0;
animation-iteration-count: 1000;
margin-top: 620px;
}
span:nth-child(1) {
animation-delay: 1s;
animation-duration: 5s;
}
span:nth-child(2) {
animation-delay: 7s;
animation-duration: 7s;
}
span:nth-child(3) {
animation-delay: 15s;
}
span:nth-child(4) {
animation-delay: 22s;
}
#keyframes flickerAnimation{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: .0;}
}
#keyframes alertFade{
0% {opacity: .25}
50% {opacity: .75}
100% {opacity: .25}
}
</style>
<div class="wrapper">
<span>Hello! </span>
<span>Please Wait While We Setup</span>
<span>This Will Only Take a Few Seconds</span>
<span>Just a second...</span>
<div style="text-align: center;">
<p id="message" align="center">Please Do Not Turn
Off Your Device.</p>
</div>
</div>
</body>
</html>
I am trying to get the following block of code to appear once the previous CSS Animation has finished :
#login{
margin-left: 25px;
margin-top: 80px;
text-align: center;
background-color: #000;
width: 350px;
height: 425px;
}
#icon{
margin-top: 50px;
width: 150px;
border-radius: 100px;
}
#other{
color: #fff;
font-size: 25px;
}
input[type=password] {
width: 70%;
height: 40px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
position: static;
}
input[type="submit"]
/*button*/{
margin-left: -41px;
height: 35.5px;
width: 32.5px;
}
#go{
background-color: gray;
color: gray;
border: none;
}
#hint{
color: #fff;
font-size: 8px;
}
</style>
<div style="text-align: center;">
<form action="tbd.htm" id="login">
<img src="http://chittagongit.com/
/images/windows-user-icon/windows-user-icon-14.jpg"
id="icon">
<p id="other" style="text-align: center;">Other User</p>
<p id="hint">Hint: Type Anything.</p>
<input type="password" name="password"
placeholder="Password"/>
<input type="submit" id="go">
</form>
</div>
How exactly can I execute this plan?
I'd just chain it to the sequence time of the actual animation since it's a fixed value anyway like so (you'll need to click the full-screen option to see example);
Oh, and PS -- I would highly recommend working to improve your code formatting habits and adhering to a cleaner DOM structure, but either way hope this helps. Cheers!
html, body{
margin: 0;
padding: 0;
background-color: #000;
}
.wrapper {
position: fixed;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(124deg, #000000,
#000000, #0095f0 ,#0095f0, #0095F0, #ff0000,
#ff0000, #0095f0);
background-size: 1800% 1800%;
animation-iteration-count: 0;
animation-fill-mode: forwards;
animation: rainbow 30s ease 1;
}
#keyframes rainbow {
0% {background-position: 0% 0%}
10%{background-position: 100%% 15%}
20%{background-position: 100% 30%}
30%{background-position: 100% 45%}
40%{background-position: 100% 60%}
50%{background-position: 100% 85%}
60%{background-position: 100% 90%}
70%{background-position: 100% 100%}
80%{background-position: 100% 90%}
90%{background-position: 100% 85%}
80%{background-position: 100% 45%}
100%{background-position:100% 15%}
}
#message{
font-size: 10px;
color: #fff;
animation-name: alertFade;
animation-duration: 4s;
text-align: center;
opacity: 0;
animation-iteration-count: 1000;
margin-top: 620px;
}
span {
margin-top: 250px;
color: #fff;
font-size: 30px;
font-family: 'Raleway', sans-serif;
animation-name: flickerAnimation;
animation-duration: 5s;
animation-iteration-count: 1;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(1) {
animation-delay: 1s;
animation-duration: 5s;
}
span:nth-child(2) {
animation-delay: 7s;
animation-duration: 7s;
}
span:nth-child(3) {
animation-delay: 15s;
}
span:nth-child(4) {
animation-delay: 22s;
}
#keyframes flickerAnimation{
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: .0;}
}
#keyframes alertFade{
0% {opacity: .25}
50% {opacity: .75}
100% {opacity: .25}
}
#keyframes finale {
from {opacity: 0}
to {opacity: 1}
}
#login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: red 1px dashed;
opacity: 0;
animation: finale 1s ease forwards;
animation-delay: 30s;
}
<div class="wrapper">
<span>Hello! </span>
<span>Please Wait While We Setup</span>
<span>This Will Only Take a Few Seconds</span>
<span>Just a second...</span>
<p id="message">
Please Do Not Turn Off Your Device.
</p>
<form action="tbd.htm" id="login">
<img src="http://chittagongit.com/
/images/windows-user-icon/windows-user-icon-14.jpg"
id="icon">
<p id="other" style="text-align: center;">Other User</p>
<p id="hint">Hint: Type Anything.</p>
<input type="password"
name="password"
placeholder="Password"/>
<input type="submit"
id="go">
</form>
</div>
I have a down arrow with rings in a ripple effect around it. The down arrow click doesn't work with the rings around it, but if I remove the rings, the click function works normally.
This is the webpage: https://rimildeyjsr.github.io/St.Anthony-Website/
Any ideas how to fix it?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
add z-index some higher value will solve the problem
body{
background: red;
}
.down-arrow {/*
display: none;*/
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 15;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
Credit to #nevermind
Question
let's if i have the following example
A-------------B------------C
how i can start an animation from the middle ( B ) then it go to A then to B and finaly it go to C , i made an example but it's not working good.
Code
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
100%{
left: 400px;
}
}
.line:after {
-webkit-animation: move 1s alternate infinite;
-moz-animation: move 1s alternate infinite;
-ms-animation: move 1s alternate infinite;
-o-animation: move 1s alternate infinite;
animation: move 1s alternate infinite;
}
<div class="container">
<div class="line"></div>
</div>
If you do it this way, I thinks it's working well.
In stead of alternate I did use linear. It makes the animation smoother.
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
75%{
left: 400px;
}
100%{
left: 200px;
}
}
.line:after {
-webkit-animation: move linear 1s infinite;
-moz-animation: move linear 1s infinite;
-ms-animation: move linear 1s infinite;
-o-animation: move linear 1s infinite;
animation: move linear 1s infinite;
}
<div class="container">
<div class="line"></div>
</div>
You could do it like this, also if add linear (because default is ease) you will get something like this Fiddle
.container .line {
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
animation: move 3s infinite;
}
#keyframes move {
0% {left: 200px;}
25%{left: 0px;}
50% {left: 200px;}
75% {left: 400px;}
100%{left: 200px;}
}
<div class="container">
<div class="line"></div>
</div>
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo