I wrote the following code that have to make a "pulsate" effect on the buttons inside a menu item
<p:menuitem>
This is the style:
<h:head>
<link rel="stylesheet" type="text/css"/>
<style>
ul.ui-menu-child {
white-space: nowrap;
width: auto !important;
}
#-webkit-keyframes glow {
0% {
-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
border-color: rgba(0,0,255,0.5);
}
100% {
-webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
border-color: rgba(0,0,255,1.0);
}
}
#-moz-keyframes glow {
0% {
-moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
border-color: rgba(0,0,255,0.5);
}
100% {
-moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
border-color: rgba(0,0,255,1.0);
}
}
#-o-keyframes glow {
0% {
box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
border-color: rgba(0,0,255,0.5);
}
100% {
box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
border-color: rgba(0,0,255,1.0);
}
}
#keyframes glow {
0% {
box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
border-color: rgba(0,0,255,0.5);
}
100% {
box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
border-color: rgba(0,0,255,1.0);
}
}
.ui-widget:hover .ui-menuitem:hover .ui-corner-all:hover .ui-menu-parent:hover {
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: glow;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-o-animation-name: glow;
-o-animation-duration: 1s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-timing-function: ease-in-out;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
</style>
<meta name="viewport" content="width=device-width"/>
this is the class that i see inside the code inspector/firebug
<li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" aria-haspopup="true" role="menuitem" style="width: 115px">
but it does not works why?
You should add a comma between each selector:
.ui-widget:hover,
.ui-menuitem:hover,
.ui-corner-all:hover,
.ui-menu-parent:hover {
/* ... */
}
Or alternatively combine all classes into one selector:
.ui-widget.ui-menuitem.ui-corner-all.ui-menu-parent:hover {
/* ... */
}
Related
my animated css gradient work perfect on Mac but not on my smartphone.
Somebody knows why?
selector {
display: inline-block;
background: -webkit-linear-gradient(-45deg, rgb(175, 46, 201), rgb(175, 46, 201), rgb(64, 207, 207), rgb(64, 207, 207));
background-size: 300%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 5vw;
letter-spacing: -5px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
animation: animated_text 5s ease-in-out infinite;
-moz-animation: animated_text 5s ease-in-out infinite;
-webkit-animation: animated_text 5s ease-in-out infinite;
}
#keyframes animated_text {
0% { background-position: 0px 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0px 50%; }
}
As well as the -webkit- versions of the several properties you have, also use the non-prefixed versions.
This snippet works fine for me on IOS 15 Safari:
.selector {
display: inline-block;
background: -webkit-linear-gradient(-45deg, rgb(175, 46, 201), rgb(175, 46, 201), rgb(64, 207, 207), rgb(64, 207, 207));
background-size: 300%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 5vw;
letter-spacing: -5px;
text-transform: uppercase;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
text-fill-color: rgba(255, 255, 255, 0);
animation: animated_text 5s ease-in-out infinite;
-moz-animation: animated_text 5s ease-in-out infinite;
-webkit-animation: animated_text 5s ease-in-out infinite;
animation: animated_text 5s ease-in-out infinite;
}
#keyframes animated_text {
0% {
background-position: 0px 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0px 50%;
}
}
<div class="selector">ABCD</div>
I am working on this CSS snippet. Why am I not able to add both pulse and fadeout animation roles to the span?
Technically I like to have both in one animation or enable to accept both pulse and fadeout animation
html,body {
height:100%;
width:100%;
}
#point {
height:100%;
width:100%;
position:relative;
}
.pulse {
position:absolute;
margin:30px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
.hideMe {
-webkit-animation: seconds 1.0s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 5s;
animation: seconds 1.0s forwards;
animation-iteration-count: 1;
animation-delay: 5s;
}
#-webkit-keyframes seconds {
0% {
opacity: 1;
}
100% {
opacity: 0;
left: -9999px;
}
}
#keyframes seconds {
0% {
opacity: 1;
}
100% {
opacity: 0;
left: -9999px;
}
}
<span class="pulse hideMe"></span>
.dot {
position: absolute;
margin: 30px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
opacity: 1;
}
.dot--animation {
animation: pulse 2s infinite,
hide .3s forwards 5s;
}
.dot--animation:hover {
animation: none;
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#keyframes hide {
100% {
opacity: 0;
}
}
<div class="dot dot--animation"></div>
You are overwriting your .pulse animation with the .second animation. You need to either include both animations in the same keyframe set or seperate the keyframe sets by comma on the animate property. Alternatively you could use a wrapper, put the fadeout on the wrapper and the pulse on the actual span.
Css properties do not 'stack' on each other, they are replaced by later instances, that is true also for animate.
I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages.
I am using keyframe animation on rotateY.
The issue is that on Firefox, while navigation to another page, the animation does work, but its very jerky and choppy.
While on Chrome and Safari, the same animation works smoothly and perfectly.
Here is a fiddle:
http://jsfiddle.net/p6mgxpbo/
HTML:
<div class="gb-loading">
<div id="animatedElem" class="pin-c">
<div class='pin'></div>
</div>
<div class="pin-mirror"></div>
<div id="gb-lb" class="load-bounce"></div>
</div>
CSS:
.gb-loading {
position: fixed;
left: 0;
right: 0;
top: 50%;
bottom: 0;
width: 70px;
height: 70px;
margin: auto;
z-index: 101;
margin-top: -100px;
}
.pin-c {
width: 70px;
height: 70px;
position: absolute;
top: 0;
left: 0;
z-index: 11;
-webkit-animation: pulsate 1.5s linear infinite;
-moz-animation: pulsate 1.5s linear infinite;
-o-animation: pulsate 1.5s linear infinite;
animation: pulsate 1.5s linear infinite;
}
.pin {
width: 70px;
height: 70px;
background-color: #34baab;
position: absolute;
left: 0;
top: 0;
-webkit-border-radius: 50% 50% 50% 0;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin-mirror {
width: 70px;
height: 70px;
background-color: #003146;
position: absolute;
left: 0;
bottom: -48px;
z-index: -1;
-webkit-border-radius: 50% 0 50% 50%;
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin:after {
content: '';
width: 25px;
height: 25px;
margin: 22px 0 0 22px;
background-color: #003146;
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.load-bounce {
width: 25px;
height: 25px;
position: absolute;
left: 65px;
background-color: #003146;
-webkit-transform: translateZ(0.5);
-moz-transform: translateZ(0.5);
transform: translateZ(0.5);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: bounce .5s linear infinite alternate;
-moz-animation: bounce .5s linear infinite alternate;
-o-animation: bounce .5s linear infinite alternate;
animation: bounce .5s linear infinite alternate;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
#-moz-keyframes pulsate {
0% {
-moz-transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(360deg);
}
}
#keyframes pulsate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(-40px);
}
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(-40px);
}
}
#-moz-keyframes bounce {
0% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(-40px);
}
}
The jerk only comes when Its there on a page which is loading other resources. I am trying to use this element as a pre-loading animation. So it's on the page until the rest of the page is loading. I also have google maps on the same page. So, while the browser is downloading other resources, till that time the animation jerks. You'll not be able to see the jerk on the fiddle.
Need some insights on how to fix this.
Thanks in advance !!
P.S: I did go through a lot of answers related to this on StackOverflow and tried searching on Google, but to no avail.
Sadly, this is something that you will not be able to fix, amend or control with browsers. You will have to use some form of hack to get it to work or confuse the system into doing what you want, but from a normal render, it won't work.
What you could possibly do is add a delay to the animation.
-webkit-animation: pulsate 0.8s linear 10ms infinite;
-moz-animation: pulsate 0.8s linear 10ms infinite;
-o-animation: pulsate 0.8s linear 10ms infinite;
animation: pulsate 0.8s linear 10ms infinite;
JSFiddle Example
What this will do is let the page render, paint and display, then it will wait for 100ms (0.1s) before starting the animation.
If this doesn't work, then it's down to FF not rendering animations as cleanly as Chrome or some other browsers and that is simply a browser issue and will be exceedingly difficult to get round.
Every browser has a completely different tree, render and paint process for displaying HTML & CSS to your monitor. Gecko (FF) and WebKit (Chrome) both use completely different methods and processes to display the page and sadly, when it comes to doing animations, Gecko has the tiniest amount of lag when starting up the animation which is why you see the small bit of lag/jerkiness when the animation begins.
Webkit flow
Gecko flow
As you can see from the above flows, both flows are completely different and the way that the DOM is loaded in, rendered, painted and then displayed is completely different.
Hope this help clears up the issue.
I've added one of the best pieces of information for you to read up on about browser rendering. It's always good to have an understanding of how browsers work when working on the front-end.
How modern browsers work
I am using keyframes with box-shadow to create an animation. Then, I am using the animation command to select the keyframe name and define some detailes on the animation (duration, delay etc...).
#myanimation{
animation: x 1s 1 ease-out ;
-webkit-animation: x 1s 1 ;
-webkit-backface-visibility: hidden;
-moz-animation: x 1s 1;
-o-animation: x 1s 1 ;
}
I will not post my keyframe, because its long. However, even though my animation duration is only 1 seconds, I am experiencing lags.
I tried everything to fix the lags, I added linear,ease-in-out etc.. all kinds of tags to the animation commnad but unsuccessful.
At the end, I just
deactivated the add-ons
(since add-ons also reduce the performance of firefox especially add-ons that block add-ons). After deactivating all my add-ons, it worked perfectly.
For some reason when you animate with Skew(0.1deg) it is not choppy.
This is on firefox 91.0 (64bit).
.test {
animation: breath2 0.8s linear 10ms infinite alternate;
}
#keyframes breath2 {
0% { transform: skewX(0.1deg) scaleX(1) translateY(-10px)}
100% { transform: skewX(0.1deg) scaleX(0.95) translateY(10px)}
}
.button {
border: 1px solid green;
height: 50px;
width: 150px;
border-radius: var(--border-radius);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
cursor: pointer;
margin-top: 10px;
text-decoration: none;
}
.button:before {
content: "";
display: block;
width: calc(100% - 10px);
height: calc(50px - 8px);
left: 5px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: var(--border-radius-before);
}
.button.fire {
border-color: #ffeca8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 138, 48, 0.6)), to(rgba(240, 96, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8;
}
.button.fire::before {
-webkit-box-shadow: inset 0 0 20px #ffeca8;
box-shadow: inset 0 0 20px #ffeca8;
}
.button.ice {
border-color: #a8ecff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(48, 138, 255, 0.6)), to(rgba(29, 96, 240, 0.6)));
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.6), rgba(29, 96, 240, 0.6));
-webkit-box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
color: #a8ecff;
}
.button.ice::before {
-webkit-box-shadow: inset 0 0 20px #a8ecff;
box-shadow: inset 0 0 20px #a8ecff;
}
.button.blaze {
border-color: #ffa8a8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(156, 20, 20, 0.6)), to(rgba(240, 29, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(156, 20, 20, 0.6), rgba(240, 29, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
color: #ffa8a8;
}
.button.blaze::before {
-webkit-box-shadow: inset 0 0 20px #ffa8a8;
box-shadow: inset 0 0 20px #ffa8a8;
}
.button.nature {
border-color: #b7ffa8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 134, 15, 0.6)), to(rgba(36, 240, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(9, 134, 15, 0.6), rgba(36, 240, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
color: #b7ffa8;
}
.button.nature::before {
-webkit-box-shadow: inset 0 0 20px #b7ffa8;
box-shadow: inset 0 0 20px #b7ffa8;
}
.button:hover {
text-decoration: none;
}
.button:hover.fire {
-webkit-box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
}
.button:hover.fire:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffeca8;
box-shadow: inset 0 0 50px 0 #ffeca8;
}
.button:hover.ice {
-webkit-box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
}
.button:hover.ice:before {
-webkit-box-shadow: inset 0 0 50px 0 #a8ecff;
box-shadow: inset 0 0 50px 0 #a8ecff;
}
.button:hover.blaze {
-webkit-box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
}
.button:hover.blaze:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffa8a8;
box-shadow: inset 0 0 50px 0 #ffa8a8;
}
.button:hover.nature {
-webkit-box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
}
.button:hover.nature:before {
-webkit-box-shadow: inset 0 0 50px 0 #b7ffa8;
box-shadow: inset 0 0 50px 0 #b7ffa8;
}
.button:hover + .button:hover {
margin-top: 15px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.breathingMain {
-webkit-animation: breath2 2s 0.5s infinite alternate;
animation: breath2 2s 0.5s infinite alternate;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
#keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
.test {
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
}
#-webkit-keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#-webkit-keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
#keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
/*# sourceMappingURL=buttons.css.map */
<div class="container">
<button class="button ice">Button</button>
</div>
Sorry for the long snippet (my first contribution :) )
The below code display animated text in most browsers, except IE where It runs but you don't see it. Could I have some guidance on how to solve this?
Please refer to this link to see the example > http://jsfiddle.net/pherrera/posvken7/
and here is the code:
<div class="container">
<div id="background" class="card">
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h3 class="frame-1">message 1</h3>
<h3 class="frame-2">message 2</h3>
<h3 class="frame-3">message 3</h3>
<h3 class="frame-4">Now!</h2>
<h3 class="frame-5">
<span>this</span> <span>is</span> <span>a message</span>
</h3>
<a class="sp-circle-link" href="#">again!</a>
</div>
</div>
</div>
</div>
body, html {
background-color: #282828;
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.card {
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border: 0px none;
-webkit-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
}
#background {
width: 600px;
height: 500px;
margin: 0 auto;
background: rgba(92, 92, 92, 1);
background: -moz-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(92, 92, 92, 1)), color-stop(100%, rgba(59, 59, 59, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: radial-gradient(ellipse at center, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#3b3b3b', GradientType=1);
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h3 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 60px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h3.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h3.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h3.frame-3 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h3.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h3.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h3.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Basically the only issue here that modern versions of IE will have a problem with is rendering a shadow on an transparent element. This is a known limitation with a couple of quirks; if the blur radius is 0 then text will be visible. Otherwise, for a shadow to be cast, the color of the text needs to be somewhat opaque.
After playing with this for a brief time I came up with a potential work-around that should suffice in your demo. Since text-shadows already work, and are able to be positioned from an offset, you can position the element itself in the opposite direction:
.blur {
top: -100vh;
position: relative;
text-shadow: 0 100vh 1em #000;
}
In order to show only a blurred text, we push the shadow down 100vh. This will set it off-screen, so we also push the element casting the shadow up 100vh, which restores the blurred text to the original position of its host element.
In this case I'm usin ga veritcal offset, but you may find that this is not ideal for some scenarios. For instance, your document is taller, and your blurred regions are further down, you may find that a lateral offset is better. In that case, you can avoid unnecessary scrollbars by hiding lateral overflow:
body {
overflow-x: hidden;
}
I've composed a demo fiddle that shows the results online here. Upon constructing this, I did notice that Chrome presently has a layout issue which is evident during resizing — it appears the vm (and presumably vh) are not kept in sync with the current viewport dimensions. You may need to use another unit if this presents an issue with your project.
Applying this effect to works that appear with a delay is also possible. I've taken the liberty to create a second fiddle that demonstrates this effect. The markup for which is very straight-forward, resembling what you already have:
<h1>
<span>Hello</span>
<span>World</span>
</h1>
<h2>
<span>Additional</span>
<span>Information</span>
<span>Provided</span>
<span>Eventually</span>
</h2>
The CSS accomplishes a few things:
Center the text in the <body> (could be limited to the headers)
Position elements off-screen, and text-shadows on-screen
Animate text-shadow property at various delays to reveal nested <span> elements
body {
text-align: center;
font-family: "Segoe UI";
}
span {
opacity: 0;
vertical-align: middle;
text-shadow: 100vw 0 3em #000;
position: relative; left: -100vw;
animation: fadein 2s ease-in-out forwards;
}
/* Controls 'Hello' and 'World' */
h1 span:nth-child(1) { animation-delay: 1s; }
h1 span:nth-child(2) { animation-delay: 2s; }
/* Controls 'Stack Overflow is Awesome */
h2 span { animation-delay: 3s; }
#keyframes fadein {
to {
opacity: 1;
text-shadow: 100vw 0 0 #000;
}
}
The end-result is a smooth, cross-browser, blurring effect:
DONE:
After some digging around the net, I managed to add some bits of code that made it work on IE (IE 11 at least).
I pretty much had to add and fiddle with these lines:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
zoom: 1; filter: alpha(opacity=0);
See here: http://jsfiddle.net/posvken7/8/
Css animations, child selectors, and gradients are supported in IE7, check out caniuse.com to see what css is supported in each browser/version.
Also, filter and animation are not supported in IE at all.
Oh, and it breaks in IE 9, it that helps anyone.
I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds.
Here is my code:
#countText{
-webkit-animation-name: color2;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 5s;
}
#-webkit-keyframes color2 {
0% { }
25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a}
50% { }
75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; }
100% {}
}
You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change animation-duration to 5s with no animation-delay
#countText {
-webkit-animation-name: color2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
}
#-webkit-keyframes color2 {
0% {
}
5%,25% {
text-shadow: -2px -5px 10px #fb0017,
-5px 0px 10px #3a00cd,
-5px 5px 10px #00ff3a;
}
15%,35% {
text-shadow: 2px 5px 10px #fb0017,
5px 0px 10px #3a00cd,
5px -5px 10px #00ff3a;
}
40% {
text-shadow: none;
}
}
Demo
.shk_this {
transform: translate3d(0, 0, 0);
animation-name: shakeMe;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes shakeMe {
2%, 18% {
transform: translate3d(-5px, 0, 0);
}
4%, 16% {
transform: translate3d(5px, 0, 0);
}
6%, 10%, 14% {
transform: translate3d(-5px, 0, 0);
}
8%, 12% {
transform: translate3d(5px, 0, 0);
}
18.1% {
transform: translate3d(0px, 0, 0);
}
}
<div class="shk_this">Shake This</div>