I am using CSS transition to ease transition between images in a bootstrap carousel. This was working perfectly for months in Chrome and Safari. All the sudden it does not work in Chrome.
HTML (in Jade):
div(class="item")
img.landing-bg(src="images/aa/ny58.jpg", alt="")
CSS:
.item {
-webkit-transition: opacity ease-in-out 1s !important;
-moz-transition: opacity ease-in-out 1s !important;
-ms-transition: opacity ease-in-out 1s !important;
-o-transition: opacity ease-in-out 1s !important;
transition: opacity ease-in-out 1s !important;
}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .active.right {right:0;opacity:0;z-index:2;}
I've used a small plugin in one project, .carousel-fade, its basically what you need:
HTML
<div id="myCarousel" class="carousel carousel-fade slide">
...
</div>
CSS
/*
* Carousel Fade Plugin
*/
.carousel-fade .item {
-webkit-transition: opacity ease-in-out 2s;
-moz-transition: opacity ease-in-out 2s;
-o-transition: opacity ease-in-out 2s;
transition: opacity ease-in-out 2s;
}
.carousel-fade .active.left,
.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
jsFiddle example.
Related
In these three cases, is there a way to write in CSS?
In normal mode
In hover mode
Out of hover
.tab:hover:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
enter image description here
js
There's only :hover in CSS but in Javascript you have mouseover and mouseout if that's of any use?
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
<!doctype html>
<html>
<head>
<style type="text/css">
#i {
height: 20px;
background-color: #999;
/*return animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
#i:hover {
height: 300px;
background-color: #F00;
/*begin animation*/
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
</head>
<body>
<div class="c" id="i" >Hover Me</div>
</body>
</html>
See above. How do I get the box 'hover me' to end its bck-color to red, on the /return animation/, using only CSS. It understandably returns to #999, but I dont want that.
Basically: Start box 20px, #999 >> expand 300px >> Contract 20px, #red
Also is there a way to pass a value to a css property when using transitions like this:
-webkit-transition: background-color:red 0.4s ease-in 0.3s
Thanks for your help. Just trying to understand the very basics.
You can do something very close (but maybe not enough) using CSS animations.
Set an animation (not transition) on the element, and pause it. Set it's fill mode to forwards. On hover set the animation to running. When the animation ends, the end state remains.
The caveat - if somebody stops hovering before the animation is done, it will remain in it's current position until hovered again.
#i {
height: 20px;
background-color: #999;
animation: animation 0.4s ease-in 0.3s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#i:hover {
animation-play-state: running;
}
#keyframes animation {
0 {
height: 20px;
background-color: #999;
}
50% {
height: 300px;
}
100% {
height: 20px;
background-color: red;
}
}
<div class="c" id="i">Hover Me</div>
I think we don't have anything like this right now, you probably use JavaScript to do this kind of things.
I had to use a combination of jquery add and remove classes. wishing it could have been pure css though.sigh
Hopefully this simple code helps someone. If anyone has something better esp with pure css... id be happy to learn. #obi Cheers and thanks to all.
<body>
<div class="c" id="i" >Hover Me</div>
<style>
.c {height: 20px; background-color: #999;}
/*----begin animation-----------------------------------*/
#i:hover {
height: 300px;
background-color: #0F0;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
/*----return animation-----------------------------------*/
.c_returnAnime {
height: 100px;
background-color: #F00;
-webkit-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-moz-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-ms-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
-o-transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
transition: height 0.3s ease-in 0s, background-color 0.4s ease-in 0.3s;
}
</style>
<script>
$('#i').hover(
//always add class before removing other or errors
function(){ $(this).addClass('c_returnAnime') },
function(){ $(this).removeClass('c') }
)
</script>
</body>
</html>
I am using
transform: scaleY(0.8);
in a :hover event. Is there a way to make this transition over time? The only way I know to transition things is to do
-webkit-transition: someparm sometime somefunction;
-moz-transition: someparm sometime somefunction;
-o-transition: someparm sometime somefunction;
transition: someparm sometime somefunction;
But I can't figure out how I would do it with a transform.
#keyframes scale {
100% { transform:scaleY(0.8);}
}
/* on hover */
abc:hover{
-webkit-animation:scale 3s ease infinite;
}
**try to animate it **
transition: transform 0.4s ease-in-out 0s;
or
transition-property: transform;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
So something like this
a {
transform:scale(1);
transition: transform 0.4s ease-in-out 0s;
}
a:hover {
transform:scale(0.8);
}
I made custom tooltip, and before applying any CSS3 animation I displayed those tooltips using display: none; for hiding it, and display: inline-block; for showing tooltip. This works ok, but now I want to animate opacity of tooltip, so it have nice fade effect. But, I have problems with this, so I need your help. This is what I've tried:
.title div.tooltip{
display: inline-block;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.title:hover div.tooltip{
display: inline-block;
filter: alpha(opacity=50);
opacity: 0.5;
}
and this is markup:
<li class="title">
<div class="tooltip">
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br>
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br>
</div>
</li>
Removing the filter: alpha(opacity=50); and adding the opacity:0; to .title div.tooltip{... worked for me.
The default for the opacity was 1, so the fade-in was going from 1 to 0.5 -- Also, I believe the filter: alpha(opacity=50) was overwriting the opacity transition completely and jumping right to opacity=50. You could also have added transitions for filter
.title:hover div.tooltip{
display: inline-block;
opacity: 0.5;
}
.title div.tooltip{
display: inline-block;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
see updated JsFiddle - includes your complete css found in comments.