This is my website http://demo.themevan.com/citynews/ when you check it on android + firefox, click the menu button(top left of the top bar), the side menu will be opened, then click any menu link, you will found they are not clickable.
I guess this is a CSS issue, but I still can't find the reason, please help!
CSS:
.pushy{
position: fixed;
width: 300px;
height: 100%;
top: 0;
z-index: 9998;
background: #222;
font-size: 0.9em;
font-weight: bold;
-webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
-moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
overflow: hidden;
-webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}
.pushy a{
display: block;
width:100%;
position:relative;
z-index:9999;
color: #b3b3b1;
padding: 10px 30px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-top: 1px solid rgba(255, 255, 255, .1);
text-decoration: none;
font:normal 1.5rem "Roboto Slab","Open Sans",Arial;
}
.pushy a:hover{
background: #333;
color: #FFF;
}
.pushy ul{
margin:0;
padding:0;
}
.pushy ul li{
list-style:none;
margin-bottom:0
}
.pushy ul.sub-menu{
text-indent:15px;
}
.pushy ul.sub-menu ul{
text-indent:30px;
}
/* Menu Movement */
.pushy-left{
-webkit-transform: translate3d(-300px,0,0);
-moz-transform: translate3d(-300px,0,0);
-ms-transform: translate3d(-300px,0,0);
-o-transform: translate3d(-300px,0,0);
transform: translate3d(-300px,0,0);
}
.pushy-open{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.container-push, .push-push{
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
}
/* Menu Transitions */
.pushy, #body-container, .push{
-webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
-moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
-o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
transition: transform .2s cubic-bezier(.16, .68, .43, .99);
}
/* Site Overlay */
.site-overlay{
display: none;
}
.pushy-active .site-overlay{
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9997;
background-color: rgba(0,0,0,0.5);
-webkit-animation: fade 500ms;
-moz-animation: fade 500ms;
-o-animation: fade 500ms;
animation: fade 500ms;
}
#keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Example Media Query */
#media screen and (max-width: 768px){
.pushy{
font-size: 1.0em;
}
}
You have a problem $(".pushy").niceScroll({ inside citynew.js.
You should remove the entire on('click') to make it works.
Related
I found this css code on internet it creates underline animation effect, i need to reverse it to be right-to-left instead of left to right.
.nav-item a {
display: inline-block !important;
&:after {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all .3s cubic-bezier(.19,1,.22,1);
-moz-transition: all .3s cubic-bezier(.19,1,.22,1);
transition: all .3s cubic-bezier(.19,1,.22,1);
-webkit-transform: scaleX(0) translate3d(0,0,0);
-moz-transform: scaleX(0) translate3d(0,0,0);
transform: scaleX(0) translate3d(0,0,0);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
-o-transition: all .3s cubic-bezier(.19,1,.22,1);
opacity: 1;
content: "";
}
&:hover {
&:after {
-webkit-transform: scaleX(1) translate3d(0,0,0);
-moz-transform: scaleX(1) translate3d(0,0,0);
transform: scaleX(1) translate3d(0,0,0);
}
}
}
i tried to change &:after from scaleX(1) to scaleX(-1) it works as i needed but far from the text.
Just change transform-origin from 0 0 to 100% 100%:
.nav-item a {
display: inline-block !important;
}
.nav-item a:after {
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transform: scaleX(0) translate3d(0, 0, 0);
transform-origin: 100% 100%;
display: block;
height: 4px;
width: 100%;
background-color: #6cb2eb;
opacity: 1;
content: "";
}
.nav-item a:hover:after {
-webkit-transform: scaleX(1) translate3d(0, 0, 0);
-moz-transform: scaleX(1) translate3d(0, 0, 0);
transform: scaleX(1) translate3d(0, 0, 0);
}
<div class="nav-item">
<a>test</a>
</div>
Note: I converted scss to css and I removed useless vendor-specific properties
You have to float: right .nav-item a::after. It will work
.nav-item > a {
display: inline-block;
border-radius: 10px;
padding: 10px 20px;
transition: all 0.3s cubic-bezier(.19,1,.22,1);
text-decoration: none;
}
.nav-item > a::after {
content: '';
display: block;
height: 4px;
width: 0%;
background-color: #6cb2eb;
float: right;
transition: all 0.3s cubic-bezier(.19,1,.22,1);
}
.nav-item > a:hover::after {
width: 100%;
}
Check this fiddle - https://jsfiddle.net/jfgq2kva/6/
I'm working on a CSS slider animation.
Everything is pretty much done apart from one last thing:
The wanted behaviour is that if I hover over the slider thumb, the slider grows in height and the value moves in the centre of the slider. This works as expected, however when the slider thumb goes underneath the newly positioned value, it goes back to the previous size (basically reverting the animation).
I think that I need some sort of "pass-through", so that basically even if I'm not technically hovering on the slider, the value doesn't interfere at all with my animation.
I know, it is not clear at all, that's why I'm including a codepen to help you better understand what I mean. Change the slider and stop it at 29. Then try sliding again and you will see the wrong effect and what I mean.
https://codepen.io/NickHG/pen/NYOoXR?editors=0110
I'm also posting the code here for future reference: (note: is done using LESScss):
#temp0-14: #185fb6;
#temp15-19: #00bcd4;
#temp20-23: #ffc107;
#temp24-31: #ef6b52;
#gaps: 8, 4, 4, 15;
#temps: #temp24-31, #temp20-23,#temp15-19, #temp0-14;
#darkText: #000;
#lightText: #fff;
#percentage: 20%;
#desaturate-percentage: 40%;
.gaps-loop(#i, #prevgap) when (#i > 0) {
#gap: extract(#gaps, #i);
#temp: extract(#temps, #i);
.span-gen-loop(#j) when (#j < #gap) {
#k: #j + #prevgap;
.temp-#{k} {
display: block;
background: #temp;
color: contrast(#temp, #darkText, #lightText, #percentage);
&:hover {
//background: darken(#temp, 8%);
}
}
.temp-color-#{k} {
color: contrast(#temp, #darkText, #lightText, #percentage);
}
.span-gen-loop(#j + 1);
}
.span-gen-loop(0);
.gaps-loop(#i - 1, #prevgap + #gap);
}
.gaps-loop(length(#gaps), 0);
.animate-color-change {
transition: background 0.8s ease;
}
/* Slider custom style */
#entryHeight: 60px;
#sliderTrackHeight: 25px;
#sliderThumbHeight: #sliderTrackHeight;
#sliderThumbWidth: 25px;
.entry-external-container {
font-family: "Roboto", sans-serif;
height: #entryHeight;
min-height: #entryHeight;
width: 100%;
max-width: 400px;
display: block;
border: 1px solid black;
display: flex;
align-items: flex-end;
padding: 0;
margin: 0;
position: relative;
.dataName {
display: block;
width: 100%;
position: absolute;
top: 0;
transform: translateY(50%);
padding-left: 10px;
z-index: 2;
animation-timing-function: ease-out;
animation: dataNameIn 0.4s forwards;
}
.dataValue {
display: block;
width: 25px;
position: absolute;
top: 0;
text-align: right;
right: 10px;
transform: translateY(50%);
padding-right: 10px;
z-index: 2;
animation-timing-function: ease-in-out;
animation: dataValueZoomOut 0.1s forwards;
}
.slidecontainer {
width: 100%;
box-sizing: content-box;
.custom-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: #sliderTrackHeight;
outline: none;
opacity: 0.7;
margin: 0;
animation: sliderAnimationBackgroundOut 0.3s;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: #sliderThumbWidth;
height: #sliderThumbHeight;
background: white;
cursor: pointer;
transition: height 0.25s, box-shadow 0.4s;
border: 1px solid rgba(0, 0, 0, 0.6);
box-sizing: border-box;
border-radius: 3px;
}
&:hover,
&:active {
&~.dataName {
animation: dataNameOut 0.4s forwards;
}
&~.dataValue {
animation: dataValueZoomIn 0.4s forwards;
&:hover{pointer-events:none;}
}
animation: sliderAnimationBackgroundIn 0.3s forwards;
&::-webkit-slider-thumb {
border-radius: 0px 3px 3px 0;
height: #entryHeight;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-left: none;
-webkit-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
box-shadow: -7px 0px 7px -2px rgba(0, 0, 0, 0.2);
background: -webkit-gradient(
linear,
-20 0,
100% 0,
from(transparent),
to(white),
color-stop(80%, white)
);
}
}
}
}
}
#keyframes sliderAnimationBackgroundIn {
0% {
opacity: 0.7;
height: #sliderTrackHeight;
}
100% {
opacity: 1;
height: #entryHeight;
}
}
#keyframes sliderAnimationBackgroundOut {
0% {
opacity: 1;
height: #entryHeight;
}
100% {
opacity: 0.7;
height: #sliderTrackHeight;
}
}
#keyframes dataNameOut {
0% {opacity: 1;top: 0}
20% {opacity: 0;top: -15px}
100% {top: -40px;opacity: 0}
}
#keyframes dataNameIn {
0% {top: -40px;opacity: 0}
20% {opacity: 0;top: -15px}
100% {opacity: 1;top: 0}
}
#keyframes dataValueZoomIn {
0% { transform: scale(1); top: 5px; right: 7.5px;}
25% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
75% { transform: scale(1.4); top: 20px;right: 13px;}
100% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
#keyframes dataValueZoomOut {
100% { transform: scale(1); top: 5px; right: 7.5px;}
75% { transform: scale(1.2); top: 10px; right: 10px;}
50% { transform: scale(1.3); top: 15px;right: 11px;}
25% { transform: scale(1.4); top: 20px;right: 13px;}
0% { transform: scale(1.5);top: 20px;right: 13.7px;}
}
use pointer-events to prevent an element from being hovered :
The pointer-events CSS property specifies under what circumstances (if
any) a particular graphic element can become the target of mouse
events.
.dataValue {
pointer-events: none;
}
PEN
You could achieve the same effect setting the hover state to the parent.
PEN
.slidecontainer {
width: 100%;
box-sizing: content-box;
&:hover {
.custom-slider {
...
}
}
}
Note: Is not a good practice to nest more than 3 levels deep,
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>
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.
For the life of me I can't figure out how to correct this. I am trying to replicate the effect from http://css-tricks.com/examples/DifferentTransitionsOnOff/ for my Wordpress image grid (code from here https://gist.github.com/matthiaspabst/1959566). 180x150 is my wp post_thumbnail image size.
Trial and error is not getting me anywhere for the past 2 hours. Here is my amateurish attempt at it http://jsfiddle.net/9F3aF/. Please help.
HTML
<div class="gridcontainer">
<div class="griditemleft">
<div class="postimage">
<img width="180" height="134" src="http://www.football-quebec.com/IMG/cache-180x134/arton1095-180x134.jpg" class="attachment-post-thumbnail wp-post-image" alt="lions" />
</div>
</div>
</div>
CSS
/* Thumbnail Grid */
.gridcontainer {}
.gridcontainer .griditemleft, .gridcontainer .griditemright {float: left; width: 210px; height:164px;}
.griditemleft .postimage img, .griditemright .postimage img {
display: block;
position: relative;
padding: 10px 10px 10px 10px;
border: 5px solid #aefbae;
background-image: -moz-linear-gradient(top, #5be93a, #278312);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-transform: rotate(720deg) rotateY(0);
-webkit-transition: all 0.5s;
-webkit-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
-webkit-transition-delay: 0.5s;
-moz-transform: rotate(720deg);
-moz-transition: all 0.5s;
-moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
-moz-transition-delay: 0.5s;
-o-transform: rotate(720deg);
-o-transition: all 0.5s;
-o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
-o-transition-delay: 0.5s;
-webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.griditemleft .postimage img:hover, .griditemright .postimage img:hover {
-webkit-transition: padding 0.2s, top 0.2s;
-webkit-transform: rotate(0deg) rotateY(0);
-webkit-transition-delay: 0;
-moz-transition: padding 0.2s, top 0.2s;
-moz-transform: rotate(0deg);
-moz-transition-delay: 0;
-o-transition: padding 0.2s, top 0.2s;
-o-transform: rotate(0deg);
-o-transition-delay: 0;
z-index: 1;
padding: 20px 20px 20px 20px;
margin: -10px 0 0 -10px;
background-image: -moz-linear-gradient(top, #5be93a, #5be93a, #278312);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));
width: 180px; height:134px;
}
.griditemleft .postimage img:after, .griditemright .postimage img:after {
background: url(noise.png) center center;
z-index: -1;
position: absolute;
}
.griditemleft .postimage img:before, .griditemright .postimage img:before {
z-index: -2;
-webkit-transition: all 0.2s;
-webkit-transform: rotate(0deg) rotateY(0);
-webkit-transition-delay: 0;
-moz-transition: all 0.2s;
-moz-transform: rotate(0deg) rotateY(0);
-moz-transition-delay: 0;
-o-transition: all 0.2s;
-o-transform: rotate(0deg) rotateY(0);
-o-transition-delay: 0;
position: absolute;
}
.griditemleft .postimage img:hover:before, .griditemright .postimage img:hover:before {
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
box-shadow: inset 0 0 100px rgba(0,0,0,0.2);
position: absolute;
}
.griditemleft .postimage img:active, .griditemright .postimage img:active {
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}
P.S. Is there any useless css in there?
Thanks
Try removing this line from your class that starts with ".griditemleft .postimage img:hover"...
margin: -10px 0 0 -10px;
I did it here. Is this what you were going for? http://jsfiddle.net/gEYxr/