I'm trying to let the animation pause in the last keyframe, so if the lines are at 50% of the page they will stay there and not go back to the first keyframe.
Also is css the best way to do this or is there a easier way to solve this?
The css:
body, html {
height: 100%;
text-align: center;
margin: 0;
}
body {
background-color: royalblue;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid white;
top: 50%;
animation: loader 4s ease;
}
.line1 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s infinite ease;
}
.line2 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s infinite ease;
}
#keyframes lines {
0% { height: 10px; }
25% { height: 10px; }
50% { height: 50%; }
75% { height: 50%; }
100% { height: 50%;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused; }
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader1 - by Thom</title>
<!-- Custom loading-thom -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<span class="line1"></span>
<span class="line2"></span>
</body>
</html>
You could use animation-fill-mode property with forwards as value.
CSS
.line1{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s forwards ease;
}
.line2{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s forwards ease;
}
DEMO HERE
What you are looking for is something called animation-fill. You can read more about it here: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
So essentially:
.line1,
.line2 {
animation-fill: forwards;
}
Also make sure that the animation-fill is declared after the animation rule.
SOLUTION 1:
Your can change animation-fill to forward
SOLUTION 2:
use jquery
<script>
$(document).ready(function(){
var half = $(document).height()/2;
setTimeout(function(){
$('.line1 , .line2').animate({height:half});
},1000);
});
In DEMO below, press Run in jsFiddle;
DEMO: https://jsfiddle.net/0andyke4/5/
Related
I'm trying to create a continuous vertical scroller effect, however having a couple of issues;
The first line appears, without stopping, like the rest of the
line
I can't seem to fade-in or fade-out
For the first point, I've tried adjusting the keyframe at 0%, too many different options and div heights, but haven't got anywhere.
On the second point, i've tried adding from: {opacity: 0.5} and to: {opacity: 0.5}, again to no success.
How do I stop the scrolling effect at the first line, like what happens with the subsequent line and add a fade-in fade-out effect?
JSFiddle: https://jsfiddle.net/ekzvLhmx/
CSS
.tagTextContainer {
text-align: left;
display: inline-flex;
width: 100%;
margin: 5px;
border-bottom: 1px solid #dcdfe5;
}
.tagText {
text-align: left;
color: black;
font-size: 13px;
}
.scrollCont {
font: normal 40px/50px monospace;
float: left;
overflow: hidden;
position: relative;
height: 18px;
top: 0px;
}
.scrollCont .scrollOptions {
font-size: 13px;
display: inline-block;
color: black;
position: relative;
top: 0;
left: 0;
/*animation*/
animation: scroll 10s;
/*animation-iteration-count*/
animation-iteration-count: infinite;
/*animation-delay*/
animation-delay: 1.5s;
}
#keyframes scroll {
0% {
top: 0px;
}
20% {
top: -66px;
}
40% {
top: -116px;
}
60% {
top: -166px;
}
80% {
top: -216px;
}
}
HTML
<div class="tagTextContainer">
<span class="tagText">
Options:
</span>
<div class="scrollCont">
<div class="scrollOptions">
SJDIUNE92323232<br />
FHD_231232_FSD<br />
RUG_12£321231$3<br />
LA21312321_TQ<br />
2132131/232 123
</div>
</div>
</div>
The problem is the first item is a little below what you expect.
I modified your version a little here
<div class="tagTextContainer">
<span class="tagText">
Options:
</span>
<div class="scrollCont">
<div class="scrollOptions">
SJDIUNE92323232<br />
FHD_231232_FSD<br />
RUG_12£321231$3<br />
LA21312321_TQ<br />
2132131/232 123
</div>
</div>
</div>
.tagTextContainer {
text-align: left;
display: inline-flex;
width: 100%;
margin: 5px;
border-bottom: 1px solid #dcdfe5;
}
.tagText {
text-align: left;
color: black;
font-size: 13px;
}
.scrollCont {
font: normal 40px/50px monospace;
float: left;
overflow: hidden;
position: relative;
height: 18px;
top: 0px;
}
.scrollCont .scrollOptions {
font-size: 13px;
display: inline-block;
color: black;
position: relative;
top: 0;
left: 0;
/*animation*/
animation: scroll 10s;
/*animation-iteration-count*/
animation-iteration-count: infinite;
/*animation-delay*/
animation-delay: 1.5s;
}
#keyframes scroll {
16% {
top: -15px;
}
32% {
top: -66px;
}
48% {
top: -116px;
}
64% {
top: -166px;
}
80% {
top: -216px;
}
}
I am following an online video (https://www.youtube.com/watch?v=wjHTKLstbRg) to make a cool looking button I'm near the end of it and it's not doing what it should be doing I have done everything it told me to and even gone through the video 5 times to check everything over please help!
Here is my code:
<!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>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
<style>
#keyframes fade {
0% {
transform translate(-50%,-75%) rotate(0deg);
}
100% {
transform translate(-50%,-75%) rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #24252A;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
}
a span {
position: relative;
z-index: 1;
color: #fff;
font-size: 20px;
letter-spacing: 8px;
}
a .liquid {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
a .liquid:before,
a .liquid:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
}
a .liquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
-webkit-animation: fade 5s linear infinite;
}
a .liquid:after {
border-radius: 40%;
background: rgba(20,20,20,1);
-webkit-animation: fade 10s linear infinite;
}
</style>
The format of transform is transform: none|transform-functions|initial|inherit;, so change it to :
#keyframes fade {
0% {
transform : translate(-50%,-75%) rotate(0deg);
}
100% {
transform : translate(-50%,-75%) rotate(360deg);
}
}
I've been coding a very simple "Traffic Light" program and have run into a problem where it doesn't run after the first #keyframes section completes correctly. From my own research online I'm guessing that I would need a transition(?) so that when the first #keyframes is complete, the next one would be run. However my inexperience with this I'm not sure if its whats required here. Essentially is there a "trigger" I'm missing or is it just something obvious I've left out?
Please excuse the rough code. Its does work as I described above
body {
background-color: #4d4d00
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
#red {
position: absolute;
left: 50px;
text-align: center;
padding: 30px;
background-color: #e60000;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: red 4s 1s 3 linear;
}
#amber {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #ff3300;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: amber 4s 1s 3 linear;
}
#green {
position: absolute;
left: 1px;
text-align: center;
padding: 30px;
background-color: #009933;
margin: 10px auto;
width: 50px;
height: 50px;
border-radius: 200px;
animation: green 4s 1s 3 linear;
}
#keyframes red {
from {
background-color: #e60000;
}
to {
background-color: #000000;
}
#keyframes amber {
from {
background-color: #ff3300;
}
to {
background-color: #000000;
}
#keyframes green {
from {
background-color: #009933;
}
to {
background-color: #000000;
}
}
<div class="container">
<div class="row">
<div id="red">
<br>
<br>
<div id="amber">
<br>
<br>
</div>
</div>
</div>
</div>
you may use animation-delay.
here is a short/minimal code example.
.red {
background: red;
}
.orange {
background: orange
}
.green {
background: lime;
}
/* layout */
div {
display: flex;
height: 150px;
width: 50px;
flex-direction: column;
border-radius: 1em;
background: #555;
margin: 1em;
}
b {
flex: 1;
margin: 5px;
border-radius: 50%;
animation: fade 9s steps(2, end) infinite;
box-shadow: 0 0 5px white
}
/* animation */
#keyframes fade {
66%,
100% {
background: gray;
box-shadow: 0 0
}
}
.red {
animation-delay: -12s
}
.orange {
animation-delay: -6s;
}
<div class=trafficLights>
<b class=red></b>
<b class=orange></b>
<b class=green></b>
</div>
here is a codepen to play with : https://codepen.io/gc-nomade/pen/YVWeQq
You have two way to do this
1) is use animation-delay and set an higher delay to elements you would like to animate after.
animation-delay: 1s;
-webkit-animation-delay:1s;
2) trigger an element.addClass("animatedClass"); with the end of a css animation using animationonend jquery function.
$(".animatedElement").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(".animatedElement").addClass("newAnimatedClass");
});
I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<meta name = "keywords" content = "InGadget | Dé site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is dé site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">
<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>
<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
</script>
</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="section1">
Placeholder
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}
.scroll #logo {
background-image: url(images/logo2.png);
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.nav a:hover {
text-decoration: underline;
}
/* STICKY NAVBAR */
.navbar.scroll {
background-color: #ffffff;
height: 75px;
}
.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}
.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }
/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}
.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}
/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}
.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
#keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:
.header-content-container {
position: absolute;
bottom: 0;
width: 100%;
}
.header-content h1{
position: absolute;
right: 20px;
bottom: 20px;
}
.mouse-icon {
position: absolute;
left: 20px;
bottom; 20px;
}
You need to position the h1 and mouseicon absolute to the bottom
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
position: absolute;
left: 10px;
bottom; 10px;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
position: absolute;
right: 10px;
bottom; 10px;
}
.header {
position:relative;
}
.header-content {
position: absolute;
bottom: 0;
right: 45px;
}
Use these styles along with your other css styles. Please Let me know if you have any other requirement.
Something like that: https://jsfiddle.net/qs1qyL9c/
.header-content {
width: 80%;
margin: auto;
position:absolute;
bottom:0;
}
I am having a progess bar which should become filled up by 50% width.
This is my current html and css for the progress bar.
HTML:
<div id="ProgressBar">
<div id="Progress"></div>
</div>
CSS:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#Progress:hover {
width: 50%;
}
As you can see the transition is starting after a hover over the progress. My goal is to have this transaition starting directly after the page loads. I know there are some examples in the internet but they are all having fade-in effects only and I can't figure it out.
I appreciate your help.
Here my fiddle:
https://jsfiddle.net/Anokrize/ssL9fjy9/
(I would like to avoid any javascript or jquery, if that is possible)
How about doing it with keyframes, like this:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 50%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation-name: progressBar;
animation-iteration-count: 1;
animation-duration: 2s;
}
#keyframes progressBar {
0% {
width: 10%;
}
100% {
width: 50%;
}
}
<div id="ProgressBar">
<div id="Progress"></div>
</div>
A straight forward way of getting this done is through jquery:
$(window).load(function() {
$("#Progress").css("width", "50%");
});
Usually you'd want something feeding a progress bar so it's actually showing progress... but if you just want it to start on load, you can use the animation property with keyframes.
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation: progress 1s ease-out forwards;
}
#keyframes progress {
from { width: 10%; }
to { width: 50%; }
}