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>
Related
I have a sequence of animations, each delayed to appear one after the other.
Sequence:
Logo
h1
hr
background starts scrolling upwards
Using animation-fill-mode: backwards each element does not appear on the page until it is animated-in. I would like the same to happen to the background. So it does not appear until all the other animations are complete. The background would then start scrolling upwards.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
display: block;
background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: background;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
100% {
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
If you want the background to just appear, try this.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
animation-delay: 5s;
display: block;
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: forwards;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
0% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
}
100% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve and animated gradient button that I've seen executed before and works in Firefox, but for some reason mine isn't work. I've tried prefixing the animations, but that did nothing.
.bookParty {
background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
display: inline-block;
background-size: auto 200%;
background-position: 0 100%;
padding: 15px;
animation: Gradient 5s linear infinite forwards;
transition: all .6s ease;
}
#keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
<div class="bookParty">
<span class="skew"><h2>Book a Party</h2></span>
</div>
Working example here:
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(transparent, rgba(0, 0, 0, .6)), linear-gradient(to bottom right, #ECECEC 50%, transparent 50%, #fff 50%);
height: 100vh;
width: 100vw;
}
.bookParty {
-webkit-animation: Gradient 3s linear infinite;
-z-animation: Gradient 3s linear infinite;
-o-animation: Gradient 3s linear infinite;
animation: Gradient 3s linear infinite alternate;
background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
background-size: 200% 200%;
padding: 25px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 3vw;
font-weight: bold;
text-shadow: 0 8px 16px rgba(0, 0, 0, .3);
color: #fff;
}
#keyframes Gradient {
to {
background-position: 50vw;
}
}
<div class="bookParty">
<span>Book a Party</span>
</div>
The following animation is run over three different elements.
How could I randomize the animation such that they occur at different times?
#keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
http://jsfiddle.net/nqQc7/1186/
Also, there appears to be a delay between the animations. How can I speed up the duration between animations without increasing the speed of the transition itself?
I have tried adding more keyframes but it doesn't seem to increase the time between animations.
You can use different animation-delay and animation-duration values for each button like below:
/**
* Icon
*/
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }
/**
* The "shine" element
*/
.icon:after {
animation: shine 1s ease-in-out alternate infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:nth-child(1):after { animation-delay: .1s; }
.icon:nth-child(2):after { animation-delay: .3s; }
.icon:nth-child(3):after { animation-delay: .5s; }
/* Hover state - trigger effect */
/* Active state */
#keyframes shine{
60% {
top: -30%;
left: -30%;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
}
}
let
it
shine
<!--
Forked by:
Nicolas Gallagher - http://jsfiddle.net/KbNq7/
Chris Coyier - http://jsfiddle.net/chriscoyier/hk6z9/1/
-->
I have a code font-icon animation my problem is when i run in local server animation does'nt works it works only in http://codepen.io/TimPietrusky/pen/ELuiG
and even tried in
http://jsfiddle.net/qjo7cf3j/
#import url(http://weloveiconfonts.com/api/?family=maki);
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background: #333;
}
[class*="maki-"]:before{
font-family: 'maki', sans-serif;
}
*:after {
position: absolute;
top: 0;
right: 0;
content: '';
z-index: -1;
width: 0;
height: 0;
}
[class*="maki-"] {
position: absolute;
margin: 0;
color: #fff;
font-size: 2em;
}
.wrapper {
height: 140%;
width: 120%;
transform: rotate(-3deg) translate(-10%, -15%);
}
.night {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
animation: night 45s infinite forwards;
}
#keyframes night {
0%, 30%, 100% {background:rgba(0, 0, 0, 0);}
55% {background: rgba(0, 0, 0, .6);}
}
.sky {
position: relative;
z-index: 0;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
height: 50%;
width: 100%;
animation: rollin-bg 25s linear infinite forwards;
}
.ground {
position: absolute;
z-index: 1;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
height: 50%;
width: 100%;
animation: rollin-bg 7s linear infinite forwards;
}
#keyframes rollin-bg {
0% {background-position: 100%;}
100% {background-position: 0;}
}
.sun {
position: absolute;
z-index: 1;
left: 50%;
top: 10%;
width: 2em;
height: 2em;
font-size: 4em;
line-height: 1;
animation: circle 45s linear infinite;
transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
color: rgba(240, 180, 0, .2);
text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
animation: inner-circle 45s linear infinite;
}
#keyframes circle {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#keyframes inner-circle {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.maki-bicycle {
left: 50%;
z-index: 4;
margin: -.85em 0 0 -.5em;
color: rgba(30, 30, 140, .95);
}
.maki-tree-1[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 6;
animation: rollin 5s linear infinite;
font-size: 2.4em;
color: rgba(0, 110, 0, 1);
}
.maki-tree-1[data-child="2"] {
margin: -1em 0 0 85%;
z-index: 2;
animation: rollin 12s linear infinite;
font-size: 1.6em;
color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
margin: -1em 0 0 25%;
z-index: 2;
animation: rollin 17s linear infinite;
font-size: 1.2em;
color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
margin: .25em 0 0 5%;
z-index: 6;
animation: rollin 12s linear infinite reverse;
font-size: 10em;
color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
right: -3em;
content: '\e82a \e82a \e82a \e82a \e82a';
font: .2em 'Maki', sans-serif;
letter-spacing: .2em;
width: 3em;
color: rgba(0, 0, 0, .6);
box-shadow:
0 .45em 0 .75em rgba(255, 255, 255, .4),
1em .35em 0 .75em rgba(255, 255, 255, .4),
2.25em .25em 0 1.05em rgba(255, 255, 255, .4)
;
border-radius: 50%;
transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
margin: -.35em 0 0 5%;
z-index: 5;
animation: rollin 22s linear infinite;
font-size: 4em;
color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 3;
animation: rollin 6s linear infinite;
font-size: 7em;
color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
margin: -1em 0 0 5%;
z-index: 2;
animation: rollin 14s linear infinite;
font-size: 4em;
color: rgba(0, 120, 120, .4);
}
.maki-heliport {
margin: -3.5em 0 0 2em;
z-index: 1;
color: rgba(30, 30, 30, .45);
font-size: 1.25em;
animation: rollin 26s linear infinite reverse 2s;
}
#keyframes rollin {
0% {margin-left:105%}
100% {margin-left:-15%;}
}
<div class="night"></div>
<div class="wrapper">
<div class="sun">
<div class="maki-fast-food"></div>
</div>
<div class="sky"></div>
<span class="maki-bicycle"></span>
<span class="maki-tree-1" data-child="1"></span>
<span class="maki-tree-1" data-child="2"></span>
<span class="maki-tree-1" data-child="3"></span>
<span class="maki-giraffe"></span>
<span class="maki-grocery-store"></span>
<span class="maki-commerical-building" data-child="1"></span>
<span class="maki-commerical-building" data-child="2"></span>
<span class="maki-heliport"></span>
<div class="ground"></div>
</div>
The reason why the animation doesn't work at all in your version, is because the animation properties need prefixes like -webkit- in some browsers.
In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select 'neither', you'll see that the CodePen example also doesn't work anymore, because the (S)CSS doesn't contain the required prefixed version for the CSS attributes.
So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).
A similar issue (for a different set of properties) was asked for and answered here.
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.