How do i add background transition to background-size if the code is following:
jsfiddle link for complete code : https://jsfiddle.net/3x4vhtj6/
div {
background-size: 100% auto;
}
div:hover {
background-size: auto 100%;
}
Updated
if This is not possible with the current version of css is their any other way to do this effect with js or jquery.
The transition property is what you're looking for. However, you need to use fixed values in order for the transition to work.
If you have no choice, you can still use jQuery in order to calculate the values and then add css properies using the jQuery .css() method.
For your use case, you could write something like this:
jQuery:
$('.my-div').css({ background-size: getBackgroundSize() });
CSS:
div.my-div {
transition: all 1s;
}
div.my-div:hover {
transition: all 1s;
}
Related
Normally in HTML file I use AOS like this
<li data-aos="fade-left" class="fields__box">
I try in different way use AOS with pseudo element in my CSS file but I don't do this in the right.
Do you have some idea how can I do that?
Thanks for your help
&::before {
content: "";
position: absolute;
background-image: url(images/logoBig.png);
z-index: -1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 70%;
background-position: center bottom;
// data-aos="fade-up";
}
I haven't used Animate on Scroll (AOS) before, but based on a reading of the docs and CSS Tricks post, I think it can be done.
Here's what AOS is doing, JavaScript-wise:
The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate. Of course, in practice, it’s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.
Based on the source code for the fade-up animation, you could try:
<li data-aos="fade-before-up" class="fields__box">
&::before {
/* ... your properties to style the before element ... */
transition-property: opacity, transform;
opacity: 0
transform: translate3d(0, 100px, 0);
}
&.aos-animate::before {
opacity: 1;
transform: translate3d(0, 0, 0);
}
Key points:
I haven't tested this. Sorry. If you'd like to create a CodePen or a JSFiddle that replicates the current behavior you're seeing, I'll see if I can tweak it.
The data-aos attribute on the HTML element shouldn't match an actual AOS animation. It's just to get the library to put the aos-animate class on the element.
The ::before pseudo-element is initially styled as 0 opacity and 100px below. When AOS adds the aos-animate class to the <li>, then the ::before element can be transitioned.
I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
So I'm using jQuery to change icons, and using CSS to apply a transition. For some reason its not working Here's my code
CSS
.fa-heart{
transition: 1s;
}
.fa-heart-o{
transition: 1s;
}
JS
$('.fa-heart-o').hover(function() {
$(this).toggleClass('fa-heart-o fa-heart');
}, function() {
$(this).toggleClass('fa-heart-o fa-heart');
});
A demo http://jsfiddle.net/cLVBg/1/ Any ideas?
content is not an animatable property, thus transition does not apply. However if you just want to fill in the heart with a transition in opacity, try working with a SVG- or CSS-created heart, or just place one on top of another and change their opacity value.
Example: http://jsfiddle.net/cLVBg/5/
What you are doing now is replacing the content on hover. If you want a slow transition, you can use CSS properties to achieve that, like so:
JSFiddle Example
HTML:
<div id="transition"></div>
CSS:
#transition {
width: 50px;
height: 50px;
background-color: blue;
}
#transition:hover {
transition: background-color 1s ease;
background-color: red;
}
The transition property requires that you declare another property to apply the transition to. You can select a duration, a transition timing function (ease, in this case), and a delay if you want.
My goal is to show an image and bring it slowly to the foreground (and extend it in the main time). I wish this can be done when I detect the event onmouseover on a div/img.
Currently, I use the hidden attribute but I dislike it because it's like: appear/vanish, without transitions.
I hope there were a solution with a CSS/CSS3 attribute which will do that. But I found none. I try something with the animate. but it hardly failed.
Do somebody know how to do such of thinqs? I'm using basic html/css/js but I can use bootstrap (if it has a good solution).
Thanks.
You can achieve this with CSS transition and transform. You could use the scale function. Here's something you can play around to get what you want:
http://jsfiddle.net/v2kHU/1/
img{
transition: all 1s;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
}
Edit:
If you want it to be hidden at the beginning then fade in and scale, you could play with the opacity:
http://jsfiddle.net/v2kHU/2/
img{
transition: all 2s;
opacity:0;
}
img:hover{
-webkit-transform:scale(2);
transform:scale(1.2);
opacity:1;
}
I have this css which does a slide out transition
.slide_animation {
transition: 10s;
left: 0px !important;
-webkit-transition-duration:800ms
}
and using jquery:
$(".shop_look").click(function(){
$("#look").show();
$("#look").addClass("slide_animation");
$(this).fadeOut(2000);
})
this works but there is no easing when the #look element shows, its too snappy, I want it to ease out like a smooth animation. thanks
It doesn't look like you're using that correctly, the display property has only two states, so you should probably use the opacity property instead (or both) :
#look {
opacity:0;
-webkit-transition-duration:800ms;
}
#look.slide_animation {
opacity:1;
}
FIDDLE
If you don't want transitions on everything, you can specify the property as well:
transition-property: opacity;