Im trying to put an animation to scale a angular mat-card on hover.
I have it scaling and doing an ease-in transition.
But i cannot seem to get it to ease out after finished hovering. The card just snaps back to its original size immediately.
Can anyone give a pointer on what i'm missing?
Here is the SCSS I have so far in src/app/styles.scss:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
&:hover::after {
transition: all 300ms ease-out;
}
}
I have tried placing the ease-out inside the .mat-card but that didnt have any effect either.
Update:
Following the post here CSS Transition - eases in but doesn't ease out? I changed my code to be:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
transition: all 300ms ease-in-out;
}
.mat-card:hover {
transform: scale(1.02);
opacity: 1;
}
The CSS of my original post was inside my styles.scss file, because I want it applied to all cards in the app, but doing the above made the transition effect stop working entirely.
It wasn't until i moved the css into the components .scss file itself that it finally began to transition in and out. src/app/pages/mycomponent/mycomponent.scss
So, why would the transition not work when added to my apps global styles.scss file, but work when added specifically to the components?
Sorry for submitting an answer instead of putting a comment, is just that I don't have enough reputation yet.
Your SCSS should look something like this:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
transition: all 300ms ease-out;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
}
The issue was that you're trying to put the ease-out on the :after of your mat-card which will basically do nothing due to that the :after selector is for the content within that certain HTML tag.
Hope this helps!
Related
I am trying to add transition, but can't make it work. My hover works slightly different, as it is targeting different class to change, it's:
.news-thumbnail:hover > .news-description-container{
padding: 1.5rem 2rem;
height: 21rem;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
Edit: adding original class
.news-description-container{
position:absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
background-color: white;
padding:2.5rem 2rem;
text-align: left;
height: 15.5rem;
}
Which makes this:
https://i.stack.imgur.com/DyeOS.png
Into this when you hover it(news-thumbnail), simply white area(news-description-container) slides up:
https://i.stack.imgur.com/Q6mxf.png
How can I make the transition work for this one? I just want it to slide up and down, not appear/disappear without transition.
Maybe I did it wrong and shouldn't do it this way?
Didn't found anything after googling, so it might be useful for others.
Thanks!
See Here... You can use same style hover transition.
Just change few parameters and thats it...
See code [Here]1
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle:
http://jsfiddle.net/Garavani/yrnjaf69/2/
<div class= "category_item">
<div class= "cat_button">
<span class="title_cat">TEXT</span>
</div>
</div>
CSS:
.category_item {
position: absolute;
background-color: #999;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
/* seems to be overwriten by animation keyframes */
-webkit-transition: -webkit-transform 0.215s ease-in-out;
transition: transform 0.215s ease-in-out;
cursor: pointer;
}
.category_item:hover {
-webkit-animation-name: easeBack;
animation-name: easeBack;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes easeBack {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
}
.cat_button {
position: absolute;
width: 200px;
height: 55px;
bottom: 0;
border: 2px solid #fff;
color: #fff;
-webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}
.category_item:hover .cat_button {
background: #fff;
border-color: #fff;
color: #511c5b;
}
In this (simplified) animation everything works fine except for when the mouse leaves the entire box. The animation starts from it original state, but abruptly.
The basic transition time (and ease) is ignored because it seems the keyframes have higher importance and overwrite it.
What I need is the keyframe animation triggering AND when the mouse leaves it should turn back to the original state smoothly.
Is there a solution for this
1) in pure CSS
2) maybe with some little javascript only?
Thanks in advance for help and ideas!
EDIT:
After implementing the solution offered kindly by Toni this is the correct fiddle:
http://jsfiddle.net/yrnjaf69/40/
Thanks again Toni!
EDIT 2:
Sadly, yet, there is one question left. The part with the keyframes is not executed on Firefox even though I added all the -moz- vendors, too, in this fiddle:
http://jsfiddle.net/dr6Ld0wL/1/
Why?
PS: As far as I tested for now it works even in Opera (Beta). Only browser resisting is Firefox
EDIT 3:
The correct (working) code is now in this fiddle:
http://jsfiddle.net/dr6Ld0wL/16/
The keyframes also need to be explicitly divided in vendor prefixes. Jesus Christ. Those prefixes…
Here is a jsfiddle that achieves this.
.demo-hover {
position: relative;
margin: 100px;
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
.demo-hover:hover {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
#keyframes complexProcess {
/* keyframes */
}
#keyframes complexProcessReversed {
/* keyframes (opposite) */
}
The animation out is assigned in the css in the main class, then the hover state kicks in on hover and css re-applies the original class properties on unhover.
The animation does trigger backwards on page load, so you might like to think of tweaking your animation to take this into account, like this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example where the animations are triggered by adding and removing classes to the target using jquery:
JavaScript
$('.demo-hover').hover(
function() {
// mouse in
$(this).removeClass('forwards--reversed').addClass('forwards');
},
function() {
// mouse out
$(this).removeClass('forwards').addClass('forwards--reversed');
}
);
CSS
.forwards {
animation: complexProcess 2s ease-in forwards;
width: 100px;
height: 100px;
background-color: #732;
}
.forwards--reversed {
animation: complexProcessReversed 2s ease-in forwards;
width: 160px;
height: 160px;
background-color: #88d;
}
Also, I'd use #keyframe or transition. Use transition if you just need a simple even change from n to m but when things are more complex, such as one thing changing evenly over 100% but another thing not starting until 50% off the animation has played, then use a #keyframe
Using both will cause confusion, especially if you're trying to animate the same properties.
Finally css vendor prefixes are required
This pretty simple JSFiddle (http://jsfiddle.net/AndyMP/sj2Kn/) changes the background colour of a block on 'hover', but how do I get it to fadein/fadeout?
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.block:hover {
background-color: #333;
}
You need to use transition property
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
-webkit-transition: background .5s; /* For webkits */
transition: background .5s;
}
Demo
The property is simple, the first parameter you pass is the property you want to animate, so say you want to animate the height you can pass the height or you can use all as the value if you want to transit all the properties which are transitional, and the next parameter is the time we set for the transition, you can set as 1s, 2s and so on where S stands for seconds.
It's worth noting that the property am using is a short hand property for the following properties
transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease
Where in the above example we are using the transition-property and transition-duration, default values are used for other properties.
Demo Fiddle
Add transition:background 200ms ease-in; to .block
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition:background 200ms ease-in;
}
Where 200ms is the amount of time you wish the fade to take.
The CSS property transition defines you want an animation to take place, the three following parts are the specific property you want to transition (can be set to all), the speed, and the animation timing function.
More on CSS transitions from MDN
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
JSFIDDLE
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
.block:hover {
background-color: #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}