I'm trying to, on li:hover, have one child <div> animate its width, at x seconds, from 0 to 100% and then a given number of seconds later animate another div the exact same way.
This is my code and it isn't working the way that I want it to.
li {
margin-bottom: -1px;
#top, #bottom {
height: 1px;
width: 0;
display: block;
background: $white;
}
#bottom {
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
#top {
-moz-animation: fadein 3s ease-in 3s forwards; /* Firefox */
-webkit-animation: fadein 3s ease-in 3s forwards; /* Safari and Chrome */
-o-animation: fadein 3s ease-in 3s forwards; /* Opera */
animation: fadein 3s ease-in 3s forwards;
}
&:hover {
#bottom {
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
width: 100%;
}
#top {
-moz-animation: fadein 3s ease-in 3s forwards; /* Firefox */
-webkit-animation: fadein 3s ease-in 3s forwards; /* Safari and Chrome */
-o-animation: fadein 3s ease-in 3s forwards; /* Opera */
animation: fadein 3s ease-in 3s forwards;
width: 100%;
}
}
}
Could someone explain to me what it is I am doing wrong?
You cannot use the animation property without defining keyframes.
Related
I have this sample:
link
CODE HTML:
<div class="quote">
<a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a>
</div>
CODE CSS:
#dex-sign {
display: inline-block;
margin: 30px 10px 15px 10px;
width: 255px;
height: 84px;
background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
}
#dex-sign.play {
-moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
opacity: .9;
}
a#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
I tried to add animation-iteration-count: infinite; But it still does not work.
With Jquery is simple but I would not use it.
Can you please tell me what I should do?Do I have to add something else to work?
Thank you in advance !
Check out working fiddle: https://jsfiddle.net/ash06229/9ybp4zkp/
I changed your CSS little bit.
#dex-sign.play {
-moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
animation: sign-anim 3.5s 0.2s steps(85) forwards;
-webkit-animation-duration: 5000ms;
animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
I'm trying to use this code for a website.
I'm using CSS3 Keyframe and animations for it with a simple list
#animation ul { /* The list with elements */
position: relative;
text-align: center;
width: 200px;
}
#animation li { /* Common styles for the list elements */
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
background-color: lightgreen;
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
background-color: yellow;
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
background-color: lightblue;
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
/* Defines the animation keyframes */
#-webkit-keyframes fadein {
0% { /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */
opacity: 0;
}
66% { /* Actual beginning of the fade in animation */
opacity: 0;
}
76% { /* The fade in animation takes 10% of the duration time */
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
I want to set 5 elements instead of 3 but when I edit this code with 5 elements, it's not the same result..
Thanks for the help !
You have to change the time intervels that you have mentioned . Check the below code.
#animation ul { /* The list with elements */
position: relative;
text-align: center;
width: 200px;
}
#animation li { /* Common styles for the list elements */
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
background-color: lightgreen;
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
background-color: yellow;
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
background-color: lightblue;
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
#animation li:nth-of-type(4) { /* fourth element of the list */
background-color: pink;
-webkit-animation: fadein 6s ease-in-out 8s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 8s infinite alternate;
animation: fadein 6s ease-in-out 8s infinite alternate;
}
#animation li:nth-of-type(5) { /* fifth element of the list */
background-color: red;
-webkit-animation: fadein 6s ease-in-out 12s infinite alternate;
-moz-animation: fadein 6s ease-in-out 12s infinite alternate;
animation: fadein 6s ease-in-out 12s infinite alternate;
}
/* Defines the animation keyframes */
#-webkit-keyframes fadein {
0% { /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */
opacity: 0;
}
66% { /* Actual beginning of the fade in animation */
opacity: 0;
}
76% { /* The fade in animation takes 10% of the duration time */
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
<li>example</li>
<li>here</li>
</ul>
</div>
I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code:
.fadeDivIn {
opacity: 1;
transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-webkit-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
}
but I can't figure out how to trigger it automatically.
I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick wall. Can anyone help please?
Have a look at the following example , you need to use keyframes
div {
background: #333;
width: 200px;
height: 200px;
-webkit-animation: smooth 5s ease-in;
-moz-animation: smooth 5s ease-in;
-o-animation: smooth 5s ease-in;
-ms-animation: smooth 5s ease-in;
animation: smooth 5s ease-in;
}
#-webkit-keyframes smooth {
0% { opacity: 0;}
100% { opacity: 1;}
}
An example : http://jsfiddle.net/zxx8u/1/
http://jsfiddle.net/DerekL/9PfMF/
div{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
from { opacity: 0; }
to { opacity: 1; }
}
You can use jQuery animate instead, very clean and easy to manipulate.
JSFiddle link
<div style="opacity:0;">some text</div>
$("div").animate({opacity: '1'}, 5000);
Something like that works for me:
.chat-messages li{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
0% { opacity: 1;}
90% { opacity: 1;}
100% { opacity: 0;}
}
You can do with simple css3 keyframe animation
demo
<div class="timedelay"></div>
.timedelay {
width: 30px;
height: 30px;
position: absolute;
background-color: red;
-webkit-animation: myanim 5s ease 5s;
}
#-webkit-keyframes myanim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I have some code for moving a div constantly across the screen using CSS3, and what I want to do is start an animation I have written in CSS at different points in the animation (i.e., 20%) during the first animation cycle, and from then on begin each cycle at 0%. Thank you for your help, JSFiddle below.
HTML:
<div class="x1">
</div>
CSS:
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
}
#keyframes animato {
0% { right: -25%; }
20% { right: 0%; }
40% { right: 25%; }
60% { right: 50%; }
80% { right: 75%; }
100% { right: 100%; }
}
http://jsfiddle.net/ER287/
How would I begin animato at the 20% mark, say?
Use negative animation-delay:
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
-webkit-animation-delay: -3s; /* offsets the animation starting point for 3/15 = 20% */
-moz-animation-delay: -3s;
-o-animation-delay: -3s;
animation-delay: -3s;
}
fiddle
So I'm trying to animate some text dropping down once its finished animating.
The problem is it just disappears after it's finished, even though I set the opacity to 1# 100%.
/* text animation */
#-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
10% {
opacity: 1;
-webkit-transform: translateY(0%);
}
20% {
opacity: 1;
-webkit-transform: translateY(0%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
.text-animation {
z-index: 1000;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 2s linear 2s;
-moz-animation: textAnimation 2s linear 2s;
-o-animation: textAnimation 2s linear 2s;
-ms-animation: textAnimation 2s linear 2s;
animation: textAnimation 2s linear 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
/* text animation */
I just don't understand what the problem is here...
This worked for me.
If you set the end state in the class and not add a delay.
#-webkit-keyframes textAnimation {
0% { opacity: 0; -webkit-transform: translateY(-200%); }
33% { opacity: 1; -webkit-transform: translateY(-200%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}
In you .text-animation declaration add this :
-webkit-animation-fill-mode: forwards;
Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).
You can see the result here : http://codepen.io/joe/pen/CkbcL
Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode