I have this page and want to apply this to it.
.contact {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float: right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {
right: 0px;
top: 0px;
}
25% {
right: 200px;
top: 0px;
}
50% {
right: 200px;
top: 200px;
}
75% {
right: 0px;
top: 200px;
}
100% {
right: 0px;
top: 0px;
}
}
.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}
<div class="contact"></div>
<div class="box"></div>
The problem is that various other elements on the page have different z-index and I want to send it behind some and in front of others. Can I animate the z-index, as it were? For example 5s into animation z-index 1 would apply, 10s in z-index 3 would apply.
Yes. It's done exactly as you'd expect. Just add z-index into your animation keyframes like so:
.contact {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float: right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {
right: 0px;
top: 0px;
}
25% {
right: 200px;
top: 0px;
}
50% {
right: 200px;
top: 200px;
z-index:100;
}
75% {
right: 0px;
top: 200px;
}
100% {
right: 0px;
top: 0px;
}
}
.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}
<div class="contact"></div>
<div class="box"></div>
Related
I have working code for a CSS preloader at CSS preloader sample
I would like the animated preloader to be colored. I tried adding the style color: red !important; to various styles to the CSS class lds-ripple, but it did nothing.
A colored preloader would look more impressive in my view.
How would I make the CSS preloader show with colored rings?
the same code from working sample is also pasted below.
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<div id="loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<style>
#loader {
display: none;
justify-content: center;
align-items: center;
width:100%;
height:100%;
border:green solid 1 px;
opacity:0.9;
background-color:whitesmoke;
position:absolute;
left:0;
top:0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
<script>
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
</script>
#fff in the line marked below can be changed to set the loader's color.
.lds-ripple div {
position: absolute;
border: 4px solid #fff; /* edit this line */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
For example:
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
showLoader();
#loader {
display: none;
justify-content: center;
align-items: center;
width:100%;
height:100%;
border:green solid 1 px;
opacity:0.9;
background-color:whitesmoke;
position:absolute;
left:0;
top:0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid red;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
<div id="loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>
For changing color animation:
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
The problem is that the divs inside the lds-ripple have no dimension into it. So the color property won't have any effect. However, the border-color will still work. So you can replace the default #fff color with something like red. For example:
.lds-ripple div {
position: absolute;
border: 4px solid red; /* HERE */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
function showLoader() {
document.getElementById("loader").style.display = "flex";
}
#loader {
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: green solid 1 px;
opacity: 0.9;
background-color: whitesmoke;
position: absolute;
left: 0;
top: 0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid red; /* HERE */
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
#keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
border-color: red;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
border-color: red;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
border-color: blue;
}
}
<button id="btnShow" onclick="showLoader()">Show Loader</button>
<div id="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
This is the code that I have so far, the color changes like it is supposed to. But the animation for moving does not work and stays in the same position. Not sure what I am missing.
div {
height: 50px;
width: 50%;
background: blue;
margin: 50px auto;
border-radius: 5px;
postion: relative;
}
#square {
animation-name: first;
animation-duration: 4s;
}
#keyframes first {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 25px;
left: 25px;
}
100% {
background-color: yellow;
top: -25px;
left: -25px;
}
}
You've make a simple mistake in your code.
On the div selector, you write the position selector as postion for this reason the animation can't work.
Here is the working code:
div {
height: 50px;
width: 50%;
background: blue;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#square {
animation-name: first;
animation-duration: 4s;
animation-timing-function: ease-in-out;
}
#keyframes first {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 25px;
left: 25px;
}
100% {
background-color: yellow;
top: -25px;
left: -25px;
}
}
<div id="square">
<h1>Hello World.</h1>
</div>
I am trying to animate height property of an element using CSS but I want it from the center. Below is my code but it changes height from bottom.
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
#-webkit-keyframes height {
from {
height: 60px;
}
to {
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
Here is JSFIDDLE
You can use transform
from {
}
to {
transform: scaleY(0.1666);
}
0.1666 comes from 10px / 60px
Here you go. I use animation top instead of height. The red toggle also needs a 'container' now so I just used the one you had there. When changing the dimensions of the red toggle, change the outer wrapper, not the toggle element (it will fit to whatever the container is, both width and height wise)
https://jsfiddle.net/j2refncs/7/
.toggle {
width: 20px;
height: 40px;
background: #ccc;
position: relative;
.left-border {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
}
#-webkit-keyframes height {
from {
top: 0;
}
to {
top: 30px;
}
}
Just add top: 75px to the keyframe since the change in height is 50px. You want to reduce the height by 25px or half from both sides, top and bottom, to come to the desired 10px. So 50px / 2 + top: 50px = top: 75px:
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px; /* starting position from the top */
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #f00;
animation: height 2s;
}
#-webkit-keyframes height {
to {height: 10px; top: 75px} /* + ending position from the top */
}
<div class="toggle">
<div class="left-border"></div>
</div>
You can animate the top with the height to make the height change appear from the center:
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
top: 25px;
height: 60px;
}
to {
top: 50px;
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
You can also use transform: scaleY() in the animation. The default transform origin is the center.
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0.167);
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
Having trouble diagnosing the cause of the floating pixel in the top left of the div. It only appeared once I added a border-radius.
Looking closely at each corner you can see some fragmenting as it applies the line before applying the radius. Perhaps a different technique all together is required.
CODEPEN
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
#keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
#keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
Use overflow: hidden
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
overflow: hidden;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
#keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
#keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
The issue is that the animation is starting in the top left then changing to the square. You can either move the starting point or use overflow hidden to fix it.
.contest-types {
border: 2px solid #BCCED4;
overflow: hidden;
border-radius: 10px;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
I'm trying to add a point/triangle to my div with a background image but am struggling with how to create enough empty space.
Here's what I'm going for:
Here's what I have so far:
<div class="bg"></div>
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
I tried following this Stack Overflow question, but the approach in the top answer creates borders that come from the ends of the rectangular div.
Could achieve your design using another div. Hope you'll like it :)
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
}
.bg:before {
content:'';
border-left: 50px solid #fff;
border-right: 50px solid #fff;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
}
.helper {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
.helper:before, .helper:after {
content: "";
background: white;
position: absolute;
top: 0;
bottom: 0;
width: calc(50% - 50px);
}
.helper:before {left: 0;}
.helper:after {right: 0;}
<div class="bg">
<div class="helper"></div>
</div>
You can achieve what you want by using pseudo element and skew them to get the shape border
.bg {
position: relative;
background: url('http://i.imgur.com/W27LCzB.jpg');
background-size: cover;
width: 100%;
padding-top: 50px;
height: 200px;
overflow: hidden;
}
.bg:before {
content: '';
background: #fff;
position: absolute;
top: 0;
right: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(-40deg);
}
.bg:after {
content: '';
background: #fff;
position: absolute;
top: 0%;
left: calc(50% + 20px);
width: 150%;
height: 50px;
transform: skewX(40deg);
}
<div class="bg"></div>