As far as I understand, if I'm trying to modify the style of an element which has the transition property, the modification will be executed in a gradual way. So is there any way to listen the change of the style, prevent the immediate modification and replace it with a custom animation?
that is transion If you want change the color using css transition
click more details
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
<div class="box"></div>
Related
In my agency's website, the buttons on the homepage have a small delay between hovering and I don't know what's causing this behaviour. Could you guys take a look?
Aparticula
This is the code applied to it
.btn span {
position: absolute;
top: 2px;
left: 2px;
width: 196px;
height: 34px;
background: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Please help!
That because you have applied transition to all
Remove this from your css
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
For better understanding, check this out :
.box {
width: 150px;
height: 150px;
background: #914969;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: #ff9999;
cursor: pointer;
<div class="box">Transition effects</div>
For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.
Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.
Hope this helps..!
I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.
The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}
You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>
the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.
I want to only use one div for the icon and one css selector.
Currently I have it working with two different background images being loaded.
fiddle: http://jsfiddle.net/6r0x4npd/
html
<h1>Hover over the icon</h1>
<div class="icon bell"></div>
css
body {
padding: 50px;
}
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/
<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
<div class="pullLeft portfolioVignette">
<div class="portfolioVignetteFilter">
<p>Test1</p>
</div>
</div>
</div>
#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
So first of all, if you look at the jsfiddle that I provided you will see what I've done.
Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.
So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.
I don't think this is the right way to do it but I couldn't find anything that could help me.
If I haven't been clear enough. tell me if you have any questions.
Thank you for your help guys,
I did something similar, but interpreted your problem a little differently:
.portfolioVignette p {
width:0;
margin-left:0;
overflow: hidden;
transition: width .5s ease-out;
transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
width:100%;
margin-left:90%;
}
Something like this should do it:
.portfolioVignette p {
width: 0;
overflow: hidden;
transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
width: 100%;
}
See it here: http://jsfiddle.net/shomz/LEjBR/6/
When 'image-strip' is hovered it opens to the height of it's contents. However, it's supposed to also have a smooth transition when doing so. What am I doing wrong? The CSS3 doesn't seem to be affecting it.
The Javascript:
<script type="text/javascript">
function hover(id) {
document.getElementById(id).style.height="100%";
}
</script>
The Styles:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
#image-strip img{
width: 100%;
}
The HTML:
<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div>
A couple things, first one:
You can actually pass 'this' in to your function call because then you have access to it and do not need to access the DOM again saving time and memory, not a noticeable amount, but its a better practice.
onmouseover="hover(this)"
function hover(el) {
el.style.height="100%";
}
Second thing:
CSS transitions are meant to be used without Javascript, the point is to not need JS to manipulate the DOM so to get a transition to work you would do:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: height 0.3s ease-in;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
cursor: pointer;
}
#image-strip:hover {
height: 100%;
}
You only need to call transition on the properties you want to affect and then when the element gets a state change, such as hover, the transition will kick in. Just to be clear you don't need any Javascript to use transitions unless you maybe add or remove an element to kick of a transition but you don't need any JS for what you are doing. Hope this is helpful.
<div id="image-strip" onmouseover="hover(this.id)"><img src="images/content/1.jpg"></div>
STEP 2-->Your css(modified you id to class --># becomes .)
.image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
STEP 3-->JavaScript(just add you css class )
function hover(id) {
document.getElementById(id).classList.add('image-strip');
}
Just make sure you do the above changes,Your code will work.100%
I had the same problem,LINK-->css bounce and add class in javascript
UPDATE 1-->
Apply your css with javascript,
document.getElementById(id).style.webkitTransitionDuration="0.6s";
document.getElementById(id).style.webkitTransitionTimingFunction="linear";
document.getElementById(id).style.cursor="pointer";