I've got this simple animation where a box is supposed to slide in from left and slide out to right. But after half way point it starts moving backwards. Any ideas why?
h2{
position: relative;
display: inline-block;
padding: 0rem 1rem;
color: black;
}
h2:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 100%;
height: 100%;
background: #ff7c7c;
z-index: -1;
animation: title-highlight 1s linear forwards;
}
#keyframes title-highlight{
0%{
left: 0;
right: 100%;
}
50%{
left: 0;
right: 0;
},
100%{
left: 100%;
right: 0;
}
}
You can add an iteration count otherwise it will just loop.
animation-iteration-count: 1;
I've edited your original example in snippet below.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
color: #fff;
background-color: #000;
padding: 12px 24px;
font-family: sans-serif;
}
h1 span {
font-size: 12px;
}
h2{
position: relative;
display: inline-block;
padding: 0rem 1rem;
color: black;
}
h2:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 100%;
height: 100%;
background: #ff7c7c;
z-index: -1;
animation: title-highlight 1s linear forwards;
animation-iteration-count: 1;
}
#keyframes title-highlight{
0%{
left: 0;
right: 100%;
}
50%{
left: 0;
right: 0;
}
100%{
left: 100%;
right: 0;
}
}
</style>
</head>
<body>
<h2>
HELLO THERE
</h2>
</body>
</html>
Related
I've got the following CSS and HTML. The problem is, that when the mouse is moved over the button, the red rectangle flashes to the center instead of smoothly moving to the center. It is strange because when the mouse is moved away from the button, it moves back slowly. How can I make the red rectangle move to the center smooth?
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
bottom: -10px;
right: -10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
For some reason, it didn't work with bottom: -10px and right: -10px. I'm not sure if this has to do with my code or if this is a browser problem, but the easy fix is to use the top and left properties instead:
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
top: 10px;
left: 10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
.red-translucent {
background-color: red;
top: 10px;
left: 10px;
}
Use transform instead of top, left, bottom, right like this:
.btn {
position: relative;
display: flex;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
transform: translate(-10px, -10px);
}
.btn .bottom-right {
transform: translate(10px, 10px);
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
transform: translate(0px, 0px);
}
This will work smoothly on either the move-in or move-out of the pointer.
Trying to make a rounded menu background. But the border-radius is not working while closing
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(1);
overflow:hidden;
}
.menu-open .menu-bg:before {
transform: scale(500);
}
<div class="btn-menu"><span>Menu</span></div>
<div class="menu-bg"></div>
JSFiddle - https://jsfiddle.net/afelixj/ew7b065h/
1px as width/height is not a good idea, I would do it differently and start at scale(0):
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu {
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 100px;
width: 100px;
background: #000;
position: fixed;
right: -20px;
top: -20px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(0);
overflow: hidden;
}
.menu-open .menu-bg:before {
transform: scale(5);
}
<div class="btn-menu"><span>Menu</span></div>
<div class="menu-bg"></div>
It's a browser bug. Sometimes it works fine and then, if you change window width, it will start messing up (I saw the problem sometimes opening the menu up).
There's a known problem using transform on fixed elements: link You should try to avoid it.
In your case, insteed of transform you could just change your width, height and position to make it work as you may desire.
As an example:
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .3s;
transform: scale(1);
border-radius: 50%;
}
.menu-open .menu-bg:before {
transition: all ease .6s;
height: 400px;
width: 400px;
right: -90px;
top: -90px;
border-radius: 50%;
}
<div class="btn-menu"><span></span></div>
<div class="menu-bg"></div>
I try to create the effect that two gates open simultaneously, I tried modifying the width property but I achieved the desired effect only on the left gate. The idea is that the right gate be closed from the center to the right border. Thanks in advance for your suggestions
body {
position: relative;
margin: 0;
background-color: goldenrod;
}
.gate {
position: absolute;
background-color: gray;
width: 50%;
height: 100vh;
float: left;
box-sizing: border-box;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.left-gate {
animation-name: left;
border-right: 1px solid white;
top: 0;
left: 0;
}
.right-gate {
animation-name: right;
top: 0;
left: 50%;
}
#keyframes left {
from {
width: 50%;
}
to {
width: 0;
}
}
#keyframes right {
from {
width: 50%;
}
to {
width: 0;
}
}
<div class="gate left-gate"></div>
<div class="gate right-gate"></div>
Add right: 0 to the right gate:
body {
position: relative;
margin: 0;
background-color: goldenrod;
}
.gate {
position: absolute;
background-color: gray;
width: 50%;
height: 100vh;
float: left;
box-sizing: border-box;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.left-gate {
animation-name: left;
border-right: 1px solid white;
top: 0;
left: 0;
}
.right-gate {
animation-name: right;
top: 0;
right: 0;
}
#keyframes left {
from {
width: 50%;
}
to {
width: 0;
}
}
#keyframes right {
from {
width: 50%;
}
to {
width: 0;
}
}
<div class="gate left-gate"></div>
<div class="gate right-gate"></div>
I have a line created out of a div now what i am trying to do is animate the div color, background grey, then it fills white, then the white fills back to grey like its sliding through. then on hover the line and text slide up about 10px, then when release it goes back to default position.
like this one here at the bottom example
.scroll-indicator {
position: absolute;
left: 50%;
bottom: 0;
z-index: 340;
display: inline-block;
width: 4.16667%;
height: 6.66667%;
min-height: 60px;
font-family: 'rajdhani', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
color: #000;
font-size: 16px;
}
.scroll-indicator .border-grey {
position: absolute;
left: 0;
top: 0;
z-index: 100;
width: 2px;
height: 100%;
background: #333;
}
.scroll-indicator .border {
position: absolute;
left: 0;
top: 0;
z-index: 200;
width: 2px;
height: 100%;
background: #000;
}
.scroll-indicator em {
display: inline-block;
font-style: normal;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: center center;
transform-origin: center center;
position: absolute;
left: 0px;
top: 12px;
}
#media screen and (max-width: 800px) {
.scroll-indicator {
bottom: 0;
}
}
<a href="" class="scroll-indicator" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
<div class="border-grey"></div>
<div class="border" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0% 0% 0px;"></div>
<em>scroll</em>
</a>
You could make use of CSS3 animations and transitions to implement that behaviour.
To implement an animation it's usually good to understand what is happening before trying to code it. In this case we can describe it in 3 easy steps:
element starts in top: 0 with height: 0
element stay in top: 0 with height: 100%
element moves to top: 100% with height: 0
With that in mind we can just code our keyframe.
Following is a small example on how to do it:
body {
background: #555;
}
.scroll-indicator {
position: absolute;
bottom: 0;
width: 30px;
left: 50%;
height: 60px;
transition: height .25s linear;
cursor: pointer;
}
.scroll-indicator:hover {
height: 75px;
}
.scroll-indicator .border-grey {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: #333;
}
.scroll-indicator .border-white {
position: absolute;
top: 0;
left: 0;
width: 2px;
background: #fff;
animation-name: animation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.scroll-indicator span {
transform: rotate(-90deg);
position: absolute;
top: 10px;
color: #fff;
}
#keyframes animation {
0% {
height: 0;
}
33% {
top: 0;
height: 100%;
}
66% {
top: 100%;
height: 0;
}
100% {}
}
<div class="scroll-indicator">
<div class="border-grey"></div>
<div class="border-white"></div>
<span>scroll</span>
</div>
My animation works in both Chrome and Firefox but not Safari, and I cannot figure out why. I use both the -webkit-animation and the simple animation function, yet it refuses to work in Safari. My CSS is as follows:
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: 0;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #7CE1C9;
height: 30px;
display: block;
width: 100%;
-webkit-animation: bar-before 1 1.8s;
animation: bar-before-two 1 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#-webkit-keyframes bar-before{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes bar-before-two {
0%{
width: 0px;
}
100%{
width: 100%;
}
}
I am simply at a standstill, any ideas?
There are two names in the animation bar-before and bar-before-two they were not prefixed properly, I think you can just merge them into one - i.e. progress-bar. Otherwise set them individually.
-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;
#-webkit-keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: 0;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #7CE1C9;
height: 30px;
display: block;
width: 100%;
-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#-webkit-keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
<div class="bar">bar</div>