I am a total newbie, hope thats not too trivial:
How do I add to reveal.js slides? I tried to add
blink, .blink {
-webkit-animation: blink 1s step-end infinite;
-moz-animation: blink 1s step-end infinite;
-o-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink {
67% { opacity: 0 }
}
#-moz-keyframes blink {
67% { opacity: 0 }
}
#-o-keyframes blink {
67% { opacity: 0 }
}
#keyframes blink {
67% { opacity: 0 }
}
to the css and then wrote:
<section>headline:
<p class="fragment">text</p>
<p class="fragment">text</p>
<p class="fragment"><font color="FF1493"><blink>text that should blink in pink</blink></font></p>
</section>
but it didnt work.
What did I do wrong?
Thanks for help,
Jean
Don't use <blink> since it is depreciated
.blink {
animation: blink 1s step-end infinite;
color: pink;
}
#keyframes blink {
67% {
opacity: 0
}
}
<section>headline:
<p class="fragment">text</p>
<p class="fragment">text</p>
<p class="fragment blink">text that should blink in pink </p>
</section>
Related
Im using react and css. In my css file I create 2 animations:
#keyframes fadein {
0% {
visibility: hidden;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
visibility: visible;
opacity: 1;
}
}
#keyframes slidedown {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(30%);
}
}
.welcome__text {
padding: 3rem;
animation:
/* slidedown 2s ease 0s 1 normal forwards; => This one doesn't work */
/* fadein 1s ease-in 0s 1 normal forwards; => This one works */
}
here is my react file :
const Home = () => {
return (
<div className='homepage'>
<div className='welcome__text'>
<h1>Welcome</h1>
<h3> to Net's Web Game </h3>
</div>
</div>
)
}
export default Home;
My fadein keyframes works fine but my slidedown doesn't. And I don't know why. Is there any conflict css rule ?
If you're calling 2 animations on 1 element you need to separate them with commas, otherwise the last one (fadein) will just take priority as CSS is read from top to bottom, thus resulting in only 1 animation. For the animation properties, just separate them with commas as well:
#keyframes fadein {
0% {
visibility: hidden;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
visibility: visible;
opacity: 1;
}
}
#keyframes slidedown {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(30%);
}
}
.welcome__text {
padding: 3rem;
animation: slidedown 2s, fadein 1s;
animation-fill-mode: forwards;
animation-timing-function: ease 0s, ease-in 0s;
animation-direction: normal;
/* slidedown 2s ease 0s 1 normal forwards; => This one doesn't work */
/* fadein 1s ease-in 0s 1 normal forwards; => This one works */
}
<div class="welcome__text">hey there!</div>
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
I've got the code below that I want to make some div bounce. At the moment they don't seem to move at all, where am I going wrong?
Here's a fiddle
#-webkit-keyframes bounceup {
0% { -webkit-transform:translateY(0); }
40% { -webkit-transform:translateY(30px); }
60% { -webkit-transform:translateY(15px); }
}
#keyframes bounceup {
0% { transform:translateY(0); }
40% { transform:translateY(30px); }
60% { transform:translateY(15px); }
}
#-webkit-keyframes bounceleft {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(-30px); }
60% { -webkit-transform:translateX(-15px); }
}
#keyframes bounceleft {
0% { transform:translateX(0); }
40% { transform:translateX(-30px); }
60% { transform:translateX(-15px); }
}
#-webkit-keyframes bounceright {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(30px); }
60% { -webkit-transform:translateX(15px); }
}
#keyframes bounceright {
0% { transform:translateX(0); }
40% { transform:translateX(30px); }
60% { transform:translateX(15px); }
}
.bounceup {
-webkit-animation-name: bounceup 2s infinite;
animation-name: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation-name: bounceleft 2s infinite;
animation-name: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation-name: bounceright 2s infinite;
animation-name: bounceright 2s infinite;
}
The problem seems to be with how you set your animations in your classes. You are using animation-name, but you are declaring more than just the name; you are adding values for animation-iteration-count and animation-duration as well.
Try instead:
.bounceup {
-webkit-animation: bounceup 2s infinite;
animation: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation: bounceleft 2s infinite;
animation: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Edit:
Seems like #Harry modified his comment and pointed precisely the above. Basically you were trying to use the shorthand version of animation but for the animation-name property.
An alternative solution would be (the non-shorthand version):
.bounceup {
animation-name: bounceup;
-webkit-animation-name: bounceup;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
I made a working copy for you:
-webkit-animation: bounceup 5s infinite;
animation: bounceup 5s infinite;
https://jsfiddle.net/nu78enm3/2/
and a link to the shorthand technique:
http://www.w3schools.com/cssref/css3_pr_animation.asp
Without Javascript, I'd like to make a simple looping CSS animation class that fades text in and out, infinitely. I don't know a lot about CSS animations, so I haven't figured it out yet, but here's how far I've gotten:
#keyframes flickerAnimation { /* flame pulses */
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.animate-flicker {
opacity:1;
animation: flickerAnimation 1s infinite;
}
As King King said, you must add the browser specific prefix. This should cover most browsers:
#keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
}
<div class="animate-flicker">Loading...</div>
well looking for a simpler variation I found this:
it's truly smart, and I guess you might want to add other browsers variations too although it worked for me both on Chrome and Firefox.
demo and credit => http://codepen.io/Ahrengot/pen/bKdLC
#keyframes fadeIn {
from { opacity: 0; }
}
.animate-flicker {
animation: fadeIn 1s infinite alternate;
}
<h2 class="animate-flicker">Jump in the hole!</h2>
To make more than one element fade in/out sequentially such as 5 elements fade each 4s,
1- make unique animation for each element with animation-duration equal to [ 4s (duration for each element) * 5 (number of elements) ] = 20s
animation-name: anim1 , anim2, anim3 ...
animation-duration : 20s, 20s, 20s ...
2- get animation keyframe for each element.
100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)
3- define starting and ending point for each animation:
each animation has 20% frame length and #keyframes percentage always starts from 0%,
so first animation will start from 0% and end in his frame(20%),
and each next animation will starts from previous animation ending point and end when it reach his frame (+20% ),
#keyframes animation1 { 0% {}, 20% {}}
#keyframes animation2 { 20% {}, 40% {}}
#keyframes animation3 { 40% {}, 60% {}}
and so on
now we need to make each animation fade in from 0 to 1 opacity and fade out from 1 to 0,
so we will add another 2 points (steps) for each animation after starting and before ending point to handle the full opacity(1)
http://codepen.io/El-Oz/pen/WwPPZQ
.slide1 {
animation: fadeInOut1 24s ease reverse forwards infinite
}
.slide2 {
animation: fadeInOut2 24s ease reverse forwards infinite
}
.slide3 {
animation: fadeInOut3 24s ease reverse forwards infinite
}
.slide4 {
animation: fadeInOut4 24s ease reverse forwards infinite
}
.slide5 {
animation: fadeInOut5 24s ease reverse forwards infinite
}
.slide6 {
animation: fadeInOut6 24s ease reverse forwards infinite
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
14% {opacity: 1 }
16% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
14% {opacity: 0 }
16% { opacity: 1 }
30% { opacity: 1 }
33% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
30% {opacity: 0 }
33% {opacity: 1 }
46% { opacity: 1 }
48% { opacity: 0 }
}
#keyframes fadeInOut4 {
0% { opacity: 0 }
46% { opacity: 0 }
48% { opacity: 1 }
64% { opacity: 1 }
65% { opacity: 0 }
}
#keyframes fadeInOut5 {
0% { opacity: 0 }
64% { opacity: 0 }
66% { opacity: 1 }
80% { opacity: 1 }
83% { opacity: 0 }
}
#keyframes fadeInOut6 {
80% { opacity: 0 }
83% { opacity: 1 }
99% { opacity: 1 }
100% { opacity: 0 }
}
I just used this in React and it works:
css:
#hightlight {
animation: fadein 2s infinite;
}
#keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
HTML:
<h1 id="hightlight"> hello </h1>
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
it is actually a browser issue... use -webkit- for chrome
I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/
I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn't like the following keyframes directives AT ALL why? I am set on html5 and css3.
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Here is the animation code;
.logotransitions img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 18s;
-moz-animation-direction: alternate;
}
Those are just the animation definitions... you still need to declare that your targeted elements use that animation :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite;
-moz-animation : cf3FadeInOut 1s ease infinite;
animation : cf3FadeInOut 1s ease infinite;
}
By the way, unless you're targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
-o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
-moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
-ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}
/*...*/
#-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/