In this Fiddle, I'm trying to get a "glow" effect in my container element.
#box {
width: 100px;
height: 100px;
margin: 10px;
animation: glow 2s ease-in-out infinite alternate;
-webkit-animation: glow 2s ease-in-out infinite alternate;
}
#keyframes glow {
from {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
to {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}
#-webkit-keyframes glow {
from {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
to {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}
It works in IE10, but for some reason in Chrome it just renders the "to" state and does not animate at all. Are gradients animate-able in Webkit?
On further inspection, it appears that background-image is not an animate-able property in Webkit, even if it's a gradient.
This is a shame, but at least it shows a static glow instead, so I guess that's something.
Related
I am new to animations in css.
I have just upgraded primeng version to v12 to my angular application 11.
I am using primeng sidebar. the sidebar after closed, the overlay is not disappearing.
Can see p-component-overlay-leave classes is added to the overlay but since there is no corresponding animation css available it is not disappearing. can anyone show me how to add this so the overlay disappears after the sidebar is closed.
css added for overlay enter:
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
animation-duration: 150ms;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: p-component-overlay-enter-animation;
}
trying to add the following but not sure how to add the respective css:
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forward;
}
Added the following and it worked
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
#keyframes p-component-overlay-leave-animation {
from {
background-color: rgba(0, 0, 0, 0.4);
}
to {
background-color: transparent;
}
}
So I have the following code:
HTML:
<transition name="slide-left-centered">
<div v-if="test" style="position: fixed; transform: translate(0, 100%)">
test code
</div>
</transition>
CSS:
.slide-left-centered-enter,
.slide-left-centered-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-centered-enter-active {
transition: all .3s ease;
}
.slide-left-centered-leave-active {
transition: all .5s ease;
}
If I were to toggle it on and off, it only fades with the opacity but does not move. This works once I remove transform from the HTML.
https://codesandbox.io/s/92mv6ov6xy
I have figured out the problem
This won't work as inline styling takes precedent.
In my real problem, it is using a class which is a child of another class. The reason why it didn't work was because of specificity. I have added !important to the transition class and now it works e.g.
transform: translateX(-100%) !important;
i have Jssor Slider , i want to make the 2 arrows left and right appear and display with fadein and fadeout
- when mouse over the 2 arrow fadein
- when mouse out the 2 arrows fadeout
any suggestion
thanks
Given there is an arrow navigator skin 'skin\arrow-01.source.html', please add following css code to to this job.
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
And finally you will get the following arrow navigator skin,
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 01 css */
/*
.jssora01l (normal)
.jssora01r (normal)
.jssora01l:hover (normal mouseover)
.jssora01r:hover (normal mouseover)
.jssora01ldn (mousedown)
.jssora01rdn (mousedown)
*/
.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a01.png) no-repeat;
overflow:hidden;
}
.jssora01l { background-position: -8px -38px; }
.jssora01r { background-position: -68px -38px; }
.jssora01l:hover { background-position: -128px -38px; }
.jssora01r:hover { background-position: -188px -38px; }
.jssora01ldn { background-position: -8px -38px; }
.jssora01rdn { background-position: -68px -38px; }
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.