I have tried multiple ways to delay the hover of a dropdown menu item by 1 second.
transition-delay:1s; does not work. I was advised to do this through a webkit-animation with a 1s.
Here is my CSS:
#media screen and (min-width: 769px) {
.bss-megamenu-fw .dropdown-menu {
-webkit-animation: 0.1s linear 1s normal forwards 1 fadein;
}
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
83% { opacity:1; }
100% { opacity:1; }
}
#-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
83% { opacity:1; }
100% { opacity:1; }
}
I am at a loss because this doesn't work. How can I get my delay?
I fixed it by adding the following to the .bss-megamenu-fw .dropdown-menu class:
animation: 0.1s linear 0.5s normal forwards 1 fadein;
Related
i have a list that looks like this
<ul class="timeline-container">
<li class="timeline-item-container">
<div class="timeline-item></div>
</li>
<li class="timeline-item-container">
<div class="timeline-item></div>
</li>
</ul>
I declare the 2 animations
#keyframes slideLeft
{
from {
transform: translateX(1000px);
}
to {
transform: translateX(0);
}
}
#keyframes slideRight
{
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0);
}
}
Then on my css i have this:
.timeline-item
{
animation: slideRight .6s ease both;
#media (max-width:767px)
{
animation: slideLeft .6s ease both;
}
}
So this works perfect, all the items in my list slide in from the right when the screen is smaller than 767px and from the left when its any bigger. when i resize the screen, the animation plays again.
Now i want every odd item in the list to slide in from the right when the screen is bigger than 767px so I add this:
.timeline-item-container:nth-child(even) .timeline-item
{
#media (min-width:767px)
{
animation: slideLeft .6s ease both;
}
}
This works if i refresh the page but if i resize the screen, the animation doesnt play. It should play the animation when the screen resizes like before
I know the animation is there because if i refresh it, it plays, just not after i resize the screen
Any help is appriciated
https://jsfiddle.net/7pk6yncd/
I think the only way is to define the same animation twice under different names. Actually the animation you are using is the same so the media query will not trigger it again.
.box {
background:red;
animation:fromLeft 2s linear forwards;
}
#media all and (max-width:600px) {
.box {
background:blue;
display:block;
animation:fromLeft-alt 2s linear forwards;
}
}
#keyframes fromLeft {
from {
transform:translateX(-100%);
}
}
#keyframes fromLeft-alt {
from {
transform:translateX(-100%);
}
}
<div class="box">
some content
</div>
You can not place #media in css rule.
It works the other way, here you go:
.timeline-item
{
animation: slideRight .6s ease both;
}
#keyframes slideLeft
{
from {
transform: translateX(1000px);
}
to {
transform: translateX(0);
}
}
#keyframes slideRight
{
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0);
}
}
#media (max-width:767px)
{
.timeline-item{
animation: slideLeft .6s ease both;
}
.timeline-item-container:nth-child(even) .timeline-item
{
animation: slideRight .6s ease both;
}
}
I want to an object move out and in screen(slide in left to right and slide out right to left).
I use this CSS:
#-webkit-keyframes slideInSmooth {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
#-webkit-keyframes slideOutSmooth {
0% {
-webkit-transform: translate3d(0,0,0);
}
100% {
-webkit-transform: translate3d(-100%,0,0);
}
}
.tabs {
-webkit-animation: slideInSmooth ease-in 250ms;
animation: slideInSmooth ease-in 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
}
.tabs-item-hide > .tabs{
-webkit-animation: slideOutSmooth ease-in 250ms;
animation: slideOutSmooth ease-in 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
}
My Html look like this:
<div id="div1" class="">
<div class="tabs">
</div>
</div>
class tabs-item-hide will be add in div1 by an event and after that item
hide.
class tabs-item-hide will be remove in div1 by an event if want to show
item
The code work fine when object show, it slide from left to right perfect.
But when object hide it does nothing!
Please help me correct my css to have object move from right to left out of screen.
Thanks!
I hope I understood you correctly, but I guess that should work for you.
.tabs-item-hide {
width:100%;
overflow:hidden;
position:relative;
height:50px;
}
#-webkit-keyframes slideInSmooth {
0% { left:0; }
90% { left:100%; }
90.0001% { left:-50px; }
100% { left:0; }
}
#keyframes slideInSmooth {
0% { left:0; }
90% { left:100%; }
90.0001% { left:-50px; }
100% { left:0; }
}
.tabs {
-webkit-animation: slideInSmooth 2.5s forwards;
animation: slideInSmooth 2.5s forwards;
position:absolute;
width:50px;
height:50px;
background:#ffa500;
}
<div class="tabs-item-hide">
<div class="tabs"></div>
</div>
I am using a css code to fade in and then fade out an html div, and after a delay, fade in another div. However, after the second div fades in and the code ends, the first div reappears. The code I am using is posted below. I wanted to know how to make sure the first div dosent reappear after the code ends.
.text {
-webkit-animation: fadein 5s
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.bdy {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.bdy {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
HTML:
<header>
<div class="text_paragraph">
<h1>DEMO</h1>
<h3>Secondary School</h3>
<h3>Grade</h3>
</div>
<div class="bdy">
<h1>hi</h1>
</div>
</header>
You can do something like this ... here is a jsFiddle
Obs: Add the other css selectors besides -webkit- to make it cross-browser
CSS
.text_paragraph {
-webkit-animation: fadeInOut 2s;
opacity:0;
}
.bdy {
-webkit-animation:fadeIn 3s;
}
#-webkit-keyframes fadeInOut{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes fadeIn{
0% {
opacity: 0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}
I have a <p> tag, and when I hover over it I want it to play an animation with #keyframes. It does the animation perfectly, but when the animation has finished, it will revert back to the state before the hovering. Does anyone know what I'm doing wrong?
EDIT: If you'd rather use a fiddle, check this out.
The reason why the buttons flash red is purely for testing reasons.
My HTML is as follows:
<div id="imgOver9" class="imgOver">
<p id="pLink9" class="pLink" href="home.html">Chillin', relaxin', maxin' all cool and shootin' some b-ball outside of school</p>
</div>
Here is the CSS for the <p> element:
.pLink{
position:absolute;
left:1vw;
top:-1vw;
height:24vw;
width:24vw;
opacity:0;
text-align:justify;
display:block;
font-family: 'Antic Didone', 'serif';
z-index:1;
background-color:red;
font-size:2vw;
}
.pLink:hover{
animation: pLink linear 0.1s;
animation-iteration-count: 1;
transform-origin:;
-webkit-animation: pLink linear 0.1s;
-webkit-animation-iteration-count: 10;
-webkit-transform-origin: ;
-moz-animation: pLink linear 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: ;
-o-animation: pLink linear 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: ;
-ms-animation: pLink linear 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: ;
}
#keyframes pLink{
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-moz-keyframes pLink{
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-webkit-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-o-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-ms-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
And here is the CSS for the parent div:
.imgOver{
opacity:0%;
width:26vw;
height:26vw;
}
.imgOver:hover{
animation: imgOver linear 0.1s;
animation-iteration-count: 1;
transform-origin: ;
-webkit-animation: imgOver linear 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: ;
-moz-animation: imgOver linear 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: ;
-o-animation: imgOver linear 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: ;
-ms-animation: imgOver linear 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: ;
}
#keyframes imgOver{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes imgOver{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I have been going over this for hours now, and I cannot find the flaw. I would be very grateful for whoever manages to solve my issue.
You will need to use animation: pLink 0.1s forwards; in order to keep the final state of the animation.
Here is a demo fiddle
please see below:
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1}
50% {height:300px; opacity: 0; }
}
I would like to start fading the object away only 50% thorugh the animation. not at the beginning. This currently doesn't do any opacity animation.
Not getting your question quiet well but I assume you want to delay the start of your animation, if it's that so.. than you can use animation-delay property... This will help you in delay your animation by few seconds
Demo (Modified demo of my answer here)
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As commented by jCuber, if you want to start animation at 50% than try this
Demo
try this i made some changes in your fiddle it's work and also link of new fiddle
<div class="blink_me"> Blink</div>
.blink_me {
animation-name: blinker;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
background:#ff0000;
border:1px solid #00ff00;
}
#-webkit-keyframes blinker {
0% {width:20px; opacity: 0;}
50% {width:20px; opacity: 1; }
100% {width:50px; opacity: 0; }
}
http://jsfiddle.net/umz8t/293/
it looks like you just made a simple mistake the last line should read 100% not 50%. It could actually read anything between 51% to 100%. You also were missing a semi-colon, added it in.
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1; }
100% {height:300px; opacity: 0; }
}