I have added on my site loading animation prepared in CSS code. I have a problem because when the animation ends it all on the page is locked and nothing can be a click away.
.loader2 {
height: 100%;
position: absolute;
top: 0;
z-index: 400;
width: 100%;
-webkit-animation: loader2 2s linear 0s;
-moz-animation: loader2 2s linear 0s;
-o-animation: loader2 2s linear 0s;
animation: loader2 2s linear 0s;
}
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; }
100%{ background-color: #ffffff; opacity: 0; }}
and in html (at the bottom of the code): <div class="loader2"></div>
I solved this problem, but it adds additional animations, which I do not need.
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; width: 100%; }
100%{ background-color: #ffffff; opacity: 0; width: 0%; }}
try to change the z-index property on the last keyframe, setting a negative value
#-webkit-keyframes loader2{
0% { background-color: #0000FF; opacity: 1; z-index: 400; }
99.9% { background-color: #ffffff; opacity: 0; z-index: 400; }
100% { z-index: -1; }
}
Related
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
I am trying to make a box slide in from the left of my page while in the viewport, however it's making my page too wide and I can't get it to reverse once out of the viewport once I've scrolled past it. This is what I have:
.box {
background: #2db34a;
border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
width: 95px;
margin-top: 500px;
}
#slide {
position: absolute;
right: -100px;
width: 100px;
height: 100px;
background: blue;
overflow: hidden;
animation: slide 0.5s forwards;
animation-delay: 1s
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
#-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
#keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
#-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
#keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
</style>
</head>
<body>
<div id="slide" class="box">Box</div>
</body>
</html>
I can't use any plug-ins to do this either.
I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#-webkit-keyframes pulsate {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}
.orb {
-webkit-animation: pulsate 2s infinite;
}
.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}
#-webkit-keyframes pulsatehover {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}
As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.container {
width: 80px;
height: 80px;
margin: 100px;
border: solid red 1px;
position: relative;
perspective: 800px;
transition: perspective 2s;
}
.container:hover {
perspective: 400px;
}
.obj {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
border-radius: 50%;
-webkit-animation: pulse 1s infinite alternate;
animation: pulse 1s infinite alternate;
}
#-webkit-keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
#keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
<div class="container">
<div class="obj">
</div>
</div>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth
I've written the following bit of CSS:
.bulb--off {
position: relative;
z-index: 11;
}
.bulb--on {
position: absolute;
z-index: 11;
left:rem(1);
right:0;
opacity:0;
}
.bulb--on {
opacity:0.4;
animation-name: bulbFlicker;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 1s;
}
#keyframes bulbFlicker {
0% { opacity: 1; }
25% { opacity: 0.9; }
50% { opacity: 0.95; }
75% { opacity: 0.9; }
100% { opacity: 1; }
}
What I hope to happen here is that the bulb would fade from off (opacity:0) to on (opacity:1) and then flicker.
What actually happens is that the bulb jumps from off to on (no fade) and then starts flickering, clearly what is happening is that when the animation starts it begins keyframe 1 as it should. I've tried adding a transition on opacity so that when it starts keyframe 1 it fades to it but it seems to ignore that property. Is there a way I can chain animations or even only make it play the first keyframe once?
I think I can do this using javascript but I've managed to get this far using CSS only and ideally I'd like it to remain CSS only.
If you apply two animations and add a delay to the second one equal to the length of the first animation you get the played first effect.
.light {
-webkit-animation: fade 3s;
animation: fade 3s;
opacity: 1;
}
.light .bulb {
-webkit-animation: jitter 1s infinite;
animation: jitter 1s infinite;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes jitter {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0.4;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes jitter {
0% {
opacity: 0.5;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
/*Meaningless stuff for it to look cool*/
.bulb {
width: 50px;
height: 50px;
border: 2px solid gray;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 50% 85%;
border-bottom-right-radius: 50% 85%;
background-color: yellow;
}
.metal {
margin-left: 10px;
width: 34px;
height: 10px;
background-color: gray;
border-bottom-right-radius: 10%;
border-bottom-left-radius: 10%;
}
.pole {
margin-left: 17.5px;
height: 100px;
width: 20px;
background-color: gray;
}
<div class="light">
<div class="bulb"></div>
<div class="metal"></div>
<div class="pole"></div>
</div>
I'm having issues in Chrome browser getting my animations to work correctly. Upon page load the first span in rw-words-1 is always off in its positioning for some reason. On the website when the page loads, it is supposed to read like...
Building "some text 1"
designed to "some word 1"
and then the words i've placed in quotes should fade out and the new words pop in like...
Building "some text 2"
designed to "some word 2"
etc, etc based on the html file below. The problem is the 2nd and 3rd span pop in the correct positioning, but the 1st span is always jumbled & overlapping the "designed to" text for some reason. It works fine however in Firefox / Safari. Any help would be much appreciated.
FRONT-END HTML
<div class="slogan">
<h1 class="rw-sentence">
<span>Building</span>
<div class="rw-words rw-words-1">
<span>some text 1...</span>
<span>some text 2...</span>
<span>some text 3...</span>
</div>
<br clear="all">
<span>designed to</span>
<div class="rw-words rw-words-2">
<span>some word 1</span>
<span>some word 2</span>
<span>some word 3</span>
</div>
</h1>
<p>Some sub-slogan here</p>
</div>
CSS:
/* ------ CSS ANIMATIONS ------- */
.rw-wrapper {
width: 90%;
padding: 10px;
}
.rw-sentence{
text-align: left;
position: relative;
}
.rw-sentence span {
white-space: nowrap;
}
.rw-words {
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 0px;
}
/* -- WEIRD FIREFOX MARGIN HACK --*/
#-moz-document url-prefix() {
.rw-words.rw-words-1 span {
margin-left: 10px;
}
}
.rw-words.rw-words-2 span {
margin-left: 10px;
}
.rw-words-1 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-moz-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
#-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 1; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
Well...I just changed some code around & added some margins/floats & it now works in all browsers. Still not sure why chrome treated the transitions/code from my original question differently though which is pretty frustrating. If anybody knows, i'd still love to know as I'm trying to get better at design that's consistent across all browsers. thx,
.rw-words {
display: inline;
float: left;
}
.rw-words span{
position: absolute;
opacity: 0;
width: 100%;
/* overflow: hidden; */
font-weight: bold;
}
.rw-words.rw-words-1 span {
margin-left: 165px;
font-weight: 480;
}
/* -- I REMOVED THE FIREFOX MARGIN HACK --*/
.rw-words.rw-words-2 span {
margin-left: 234px;
font-weight: 480;
}