I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.
I'm using Chrome browser, which uses the -webkit prefixes as preference and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.
I have a JSFiddle here.
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>
The display doesn't work with CSS transition or animation.
Use opacity, visibility or z-index. You can combine all them.
Try to use visibility: visible in place display: block and visibility: hidden in place display: none.
And finally, combine z-index: -1 and z-index: 100 for example.
Good work ;)
If you are using #keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for #keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
See code snippet below:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
}
.parent:hover .myDiv {
display: block;
opacity: 1;
/* "both" tells the browser to use the above opacity
at the end of the animation (best practice) */
-webkit-animation: display-none-transition 1s both;
animation: display-none-transition 1s both;
}
#-webkit-keyframes display-none-transition {
0% {
opacity: 0;
}
}
#keyframes display-none-transition {
0% {
opacity: 0;
}
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
2016 UPDATED ANSWER
To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.parent:hover .myDiv {
opacity: 1;
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
You can not animate display property. You can try with visibility: hidden to visibility: visible
Just use position: fixed and drop the z-index: -5 at the end of the #keyframe animation (you can do any negative index....
CSS:
#keyframes fadeOut {
0% { opacity: 1
}
99% {
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
display:none;
position: fixed;
z-index: -5;
}
}
It's been tricky, it's been nasty, but here it is...
FadeOut (opacity) first
then truly hide (meaning: not covering up or catching any clicks, getting height: 0,...)
display: <whatever> is indeed no option.
But animating scaleY is. Or translate to far-far-away or the old classic: animating max-height (from a specific high px value) down to 0px…
For an earlier version of this snippet with some more general info on „back and forth animation on class toggle“ (and preventing that animation upon initial page load look here.
const div = document.querySelector('.target')
function toggleTarget() {
div.classList.add('active');
div.classList.toggle('play');
}
/* REF https://stackoverflow.com/a/49575979 */
/* REF https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html { /* eye candy */
background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}
div { /* eye candy */
width: 200px; height: 100px; border-radius: 20px;
background: green; display: flex; align-items: center; justify-content: center;
font-family: sans-serif; font-size: 2em; color: white; text-align: center;
text-shadow: 0px 2px 4px rgba(0,0,0,.6);
}
/* using this extra .active class prevents that there is an animation already on loading */
.active {
animation: fadeAndHideBack 1s linear forwards;
}
.play {
opacity: 0;
/* learning curve: setting background "awaits" animation finish,
setting scale prematurely jumps to it, then doing animation from there */
animation: fadeAndHide 1s linear forwards;
}
#keyframes fadeAndHide {
0% { opacity: 1; }
99.9% { opacity: 0; max-height: 100px; }
100% { opacity: 0; max-height: 0; }
}
#keyframes fadeAndHideBack {
0% { opacity: 0; max-height: 0; }
0.1% { opacity: 0; max-height: 100px; }
100% { opacity: 1; }
}
<div class="target"></div>
<button onclick="toggleTarget()">
Toggle
</button>
You can use Javascript to change both the display properties and animation. You can't put display in #keyframes.
Start with the element display:none. Then simultaneously add display:block and animation:* classes.
Here's a working example with animation in/out.
add this css ;
.fade:not(.show) {
opacity: 1;
}
this work for me..
How about this example: jsfiddle
The issue was needing to use an animation rather than transition with keyframes
#-webkit-keyframes fadeAnimation {
0% {
opacity: 0;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
}
#parent {
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#parent:hover #myDiv {
-webkit-animation: fadeAnimation 6s;
}
You can't animate the display property. You can animate the visibility property. But visibility is not the same as display, as it will not remove the div element completely from the DOM (the property, visibility:collapse, can remove an element from the DOM, if the element is a table. This is an exception). You can instead animate CSS properties height and width. For instance, the below code will animate the square-block out.
function myAnimation(){
var square= document.getElementById('square');
if(square.getAttribute("class")==='square'){
square.classList.add('animation');
}else{
square.classList.remove('animation');
}
}
.square {
background-color:blue;
transform: translate(0, 0);
width: 100px;
height: 100px;
opacity: 1;
transition: all 0.5s ease-out;
}
.square.animation {
transform: translate(-260px, -260px);
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease-in;
}
<html>
<body>
<div class="square" id="square"></div>
<br/>
<button onclick="myAnimation()">Animate</button>
</body>
</html>
FYI, I have used CSS transitions to animate the div. Hope this was useful.
Related
I have a typing effect that I like, I want to use it for all my page titles, but the problem is it works by specifying a width. This would be fine for a homepage with a slogan, but if I ever decide to change it all of my width values would need to change too. Is there any way this can still function the same without being based on a width?
The example is what I'm using on my homepage, it's a slogan. But my title's would be single line text like: About, Contact, Support, News, etc.
My code looks like:
<div id="head">
<div class="wrap">
<div>
<p>We Create</p>
<p>Software for</p>
<p>People!!</p>
</div>
</div>
</div>
My CSS looks like:
#head {
background: #000;
height: 700px;
overflow: hidden;
position: relative;
}
#head .wrap {
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
width: 100%;
}
#head .wrap div {
align-items: center;
display: flex;
flex-direction: column;
letter-spacing: 2px;
height: 100%;
position: relative;
width: 100%;
}
#head .wrap div p {
border-right: 5px solid #b5cfd7;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
margin-left: 10px;
overflow: hidden;
text-transform: uppercase;
white-space: nowrap;
}
#head .wrap div p:nth-child(1) {
animation: type 2s steps(20, end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
width: 575px;
}
#head .wrap div p:nth-child(2) {
animation: type2 2s steps(20, end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 775px;
}
#head .wrap div p:nth-child(3) {
animation: type3 2s steps(20, end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 475px;
}
/* Animation */
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
}
}
/* Animation */
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
opacity: 1;
}
}
/* Animation */
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/* Animation */
#keyframes blink {
50% {
border-color: transparent;
}
}
Live Example: https://codepen.io/joshrodgers/pen/BaxxQzo
Any help is appreciated!
Thanks,
Josh
Ok...
So, I found a solution...it uses some JS, but that's the only way I could get it to work!
Here's how my code looks now:
<div id="head">
<div class="wrap">
<div class="row">
<div class="text">
<p>We create</p>
<p>Software for</p>
<p>People!!</p>
</div>
<div class="title"></div>
</div>
</div>
The CSS:
#head {
background: #000;
overflow: hidden;
position: relative;
}
#head .wrap {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
text-align: center;
width: 100%;
}
#head .row {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
#head .text {
display: none;
}
#head .title {
position: relative;
z-index: 1;
}
#head .title span {
color: #fff;
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
letter-spacing: 2px;
height: 90px;
min-width: 5px;
text-transform: uppercase;
}
#head .cursor:after {
animation: blink 1s linear infinite alternate;
background: #b5cfd7;
content: "";
display: inline-block;
height: 75%;
margin-left: 30px;
opacity: 0;
width: 5px;
}
/* Animation */
#keyframes blink {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
The JS:
var sentences = [];
var currentText;
$(document).ready(function(){
$('.text p').each(function(){
var text = $(this).text();
text += " ";
sentences.push(text);
});
currentText = sentences.shift();
typeWord(currentText);
});
jQuery.fn.extend({
appendChars: function(char){
$(this).text(char);
}
});
function spliter(string){
return string.trim().split("");
}
function appendTextLine(){
return $('<span class=""></span>').appendTo('.title');
}
function typeWord(text){
if (!text){
return;
}
var charArray = [];
for (i = 0; i < text.length; i++){
var char = text.slice(0,i);
charArray.push(char);
}
var textLine = appendTextLine();
$('.cursor').removeClass('cursor');
textLine.addClass('cursor');
var interval = setInterval(function(){
firstChar = charArray.shift();
$(textLine).appendChars(firstChar);
if (charArray.length === 0){
currentText = sentences.shift();
typeWord(currentText);
clearInterval(interval);
}
},100);
}
I have a pen here: https://codepen.io/joshrodgers/pen/yLjjzYb
Single line text version here: https://codepen.io/joshrodgers/pen/RwyJroQ
There were two problems with my initial code, it wouldn't work with dynamic text, which this solves because it's not based on a width and two the text was not centered in the window, which I didn't realize when I create this post, but the solution also solves that issue as well.
Hope this helps someone!
Thanks,
Josh
I have tried applying animation of rotating word vertically with the help of CSS and HTML but it does't work. Can anyone tell me that what is the problem with the code.
.line {
width: 100%;
height: 4rem;
overflow: hidden;
border: 1px solid black;
padding: 0;
margin-bottom: 16px;
}
/* flipping class and key frames*/
keyframes anim-flipX {
0% {
opacity: 0;
transform: rotateX(90def);
}
50% {
opacity: 1;
transform: rotateX(720deg);
}
100% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(720deg);
}
}
<div class='line'>
<h2 class='flipX'>flip vertical</h2>
</div>
You have a couple of things wrong with your syntax. Here is the fixed up version that works. You were missing in # at beginning of keyframe, missing the animation duration and animation name in the class. There was also a type (def instead of deg).
.line {
width: 100%;
height: 4rem;
overflow: hidden;
border: 1px solid black;
padding: 0;
margin-bottom: 16px;
animation-duration: 3s;
animation-name: anim-flipX;
}
/* flipping class and key frames*/
#keyframes anim-flipX {
0% {
opacity: 0;
transform: rotateX(90deg);
}
50% {
opacity: 1;
transform: rotateX(720deg);
}
100% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(720deg);
}
}
<div class='line'>
<h2 class='flipX'>flip vertical</h2>
</div>
You have to add animation-name and animation-duration properties:
.line {
width: 100%;
height: 4rem;
overflow: hidden;
border: 1px solid black;
padding: 0;
margin-bottom: 16px;
animation-name: anim-flipX; /* new */
animation-duration: 2s; /* new */
}
Also you need to add # before keyframes:
#keyframes anim-flipX {
0% {
opacity: 0;
transform: rotateX(90deg);
}
50% {
opacity: 1;
transform: rotateX(720deg);
}
100% {
opacity: 1;
transform: rotateX(720deg);
}
}
And your animation should work.
Any idea why it's happening? I appreciate any and all help. I'm new to html and css so maybe im making a simple mistake here.
I have several columns that move up and down with images loaded locally into the columns. The images shuffle every 6 minutes. The outline around the images flickers as they move up and down the screen. The issue goes away if I remove the outline. I have no idea whats going on.
::-webkit-scrollbar {
display: none;
}
html {
height: 100vh;
height:100%
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
scroll: no;
overflow: hidden;
}
.main {
display: flex;
overflow: hidden;
min-height: 50vw;
background: #333;
}
.main img {
border-radius: 6px;
max-width: 100%;
vertical-align: middle;
outline: 1px solid white;
box-sizing: border-box;
##filter: blur(0.03rem);
opacity: .75;
outline-offset: -3px;
padding: 3px;
overflow: hidden;
}
.main:hover img {
##filter: blur(0.03rem);
opacity: .75;
transition: all 10s;
}
.main img:hover {
##filter: blur(0);
filter: drop-shadow(0 0 0.75rem black);
opacity: 1;
transition: all .2s
}
.main .single-column {
-webkit-animation: var(--animation, none) 360s linear 0.01s infinite;
}
.main .single-column:hover {
animation-play-state: paused;
}
.main .single-column:nth-of-type(odd) {
vertical-align:top;
align-self: flex-end;
--direction: 15%;
}
#keyframes slide {
to {
-webkit-transform: translateY(var(--direction, -15%));
}
I have a problem with a loader on my home page, I have to use a tablet look for the desktop version, with space on the left and right of the website.
So i used, margin : 0 auto 0 auto for the body on desktop.
The problem is my loader is also following this rule, it's not in the center anymore, I've tried to give it a margin : 0 but doesn't work, I've also tried to give a negative margin, it's moving but it's not really responsive..
If you have any solution, I would appreciate !
I'll provide some pictures so you can understand easier :
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 100%;
border: 20px solid #fff;
border-right-color: transparent;
animation-name: circle;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loading {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
html {
width: 100%;
}
body {
margin: 0;
}
#media (min-width: 993px) {
body {
width: 993px;
margin: 0 auto 0 auto;
background-color: #5D5D5D;
}
}
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
</body>
The margin is there because on your media-queries you are using min-width So essentially your media-queries are being implemented in your desktop version, which is not what you want. Hence, it is using the width: 993px; you set to it.
I changed min-width to max-width assuming you want the media styles to happen BELOW 993px. max-width: 993px = anything below 993px. So now, between 0-993px screen width, your media queries will take effect. Alternatively, min-width: 993px means anything ABOVE the set range, in this case 993px.
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loading;
animation-duration: 2.5s;
animation-fill-mode: forwards;
animation-position: center;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 100%;
border: 20px solid #fff;
border-right-color: transparent;
animation-name: circle;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loading {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
body {
margin: 0;
}
#media (min-width: 993px) {
body {
width: 993px;
margin: 0 auto 0 auto;
background-color: #5D5D5D;
}
.chargement {
width: 993px;
}
}
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
</body>
I cant understand why child div showed without fadein effect? I need when I hover on div ("black") then div (red) gradually appeared.. How do it?
Fiddle
HTML
<div class="main">
<div class="ok"></div>
</div>
CSS
.main {
width: 200px;
height: 200px;
background: black;
}
.ok {
width: 50px;
height: 50px;
background: red;
display: none;
-webkit-transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
display: block;
}
Thanks
You can't apply the transition when changing the display property:
Transitions on the display: property
Just remove the display part, and it will work:
.ok {
width: 50px;
height: 50px;
background: red;
transition: opacity 1s linear;
opacity: 0;
}
.main:hover .ok{
opacity: 1;
}
Fiddle: http://jsfiddle.net/sGxgv/1/