I want to use a transform for both scale and translateX, but each with a different timing function. Currently I have it working with absolute positioning instead of translateX, as follows:
transition: transform 500ms cubic-bezier(0.390, -0.600, 1.000, -0.600),
left 500ms cubic-bezier(0.270, 0.875, 0.575, 0.870);
.
left: -50px ;
transform: scale(2,2) ;
How would you rewrite this to achieve the same, but use translateX instead of left ?
In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself.
demo
HTML:
<div class='wrap'>
<div class='el'></div>
</div>
Relevant CSS:
.wrap {
transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}
.el {
transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}
.wrap:hover { transform: scale(2,2); }
.wrap:hover .el { transform: translateX(-50px); }
Not sure it's a better idea than simulating a translateX by using left.
Another idea would be not to use a transition, but an animation and set the keyframes such that to obtain the desired effect.
Related
I have a less file that hide and display an element like the following:
.cmp-accordion__panel {
&--hidden {
display: none;
}
&--expanded {
display: block;
-webkit-animation: slide-down 0.5s ease-out;
-moz-animation: slide-down 0.5s ease-out;
}
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-5%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-5%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
In my JavaScript, I toggle the class name of the element between "cmp-accordion__panel--hidden" and "cmp-accordion__panel--expanded" if the event is triggered. I use keyframe and opacity to animate the transition from "display:none" to "display:block".
However, when I go from "display:block" to "display:none" to hide the element, the effect happens INSTANTLY. What should I add to animate the hiding?
As already said, is not possible animate or transition from display:block; to display: none; but this could be simulated in another way and is not necessary to use CSS animations, simply CSS transitions (in addition, is not necessary anymore to use vendor-prefixes to declare transitions or animations).
Please, look at this working example:
HTML (I inserted a fake content to create an element with a relative big height)
<div class="cmp-accordion__panel--expanded">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
LESS
[class*="cmp-accordion__panel"] {
border:solid 1px red;
overflow:hidden;
transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}
.cmp-accordion__panel {
&--hidden {
max-height:0;
opacity:0;
}
&--expanded {
opacity:1;
max-height:1000px;
}
}
Please note that, thanks to attribute partial value selector I added also some rules that apply to both *--hidden and *--expanded classes (I personally prefer a general class and an addition of a second one in some cases, instead of switching between two, but I did not want to change too much your approach).
The key rule is switching between two values of max-height property, from a 0 value to another "enough big" one. If you effectively know final height of the element you can simply use also height property, but in case of dynamic content, max-height did the trick.
Please note also the presence of overflow:hidden; applied to both classes, to simulate height changes.
Finally, animation effect relies only on a CSS transition applied to opacity and max-height properties, with different timings to enhance effect.
You cannot animate or transition from display: block; to display: none;, so you will need to remove this if you wish to animate it.
To ensure it fades and is removed you should animate the visibilty and opacity attributes.
Alternatively if you are using jQuery you can use the .fadeOut() function.
MDN - CSS Visibility
jQuery - fadeOut()
I have this code:
transition: all 0.35s;
transition-delay: 0.25s;
transition-timing-function: cubic-bezier(.79,0,.46,1);
But it turned out to be problematic if I add more properties that I wanna animate, so I'm looking to do something like:
transition: transform 0.35s/*duration*/ 0.25s /*delay*/ cubic-bezier(.79,0,.46,1),
opacity 0.25s/*duration*/ 1s /*delay*/ ease-in ;
I looked at the short-hand properties but can't quite find the right combo.
Yes, what you want is a css animation not a css transition. Transitions are for creating a smooth transition from one state to another while animations allow you to define more complex behavior by changing css properties.
It would look something like this:
element {
animation-name: yourAnimationName;
animation-timing-function: cubic-bezier(.79,0,.46,1);
animation-delay: 0.25s;
}
#keyframes yourAnimationName {
// here you define which css properties to animate
}
You can either define the keyframes using from and to:
#keyframes yourAnimationName {
from { background-color: red; }
to { background-color: yellow; }
}
or you can define multiple keyframes using percentages (at what percentage of the entire animation):
#keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
You also probably wont need your cubic-bezier timing function if you use keyframes as percentages.
I recommend reading a bit about css animations HERE.
I'm using revolution slider and I'm stuck with a problem. As an example I use the original demo from here: https://revolution.themepunch.com/wordpress-photography-slider.
On the tab 'portfolio' you see images that shrink in size with a transition and look a bit darker when you hover over them. This is what I want as well but I can't figure out how.
In revolution slider you can add classes, ID's and CSS to specific images so what I probably need is a CSS code that makes this possible. I've tried several codes I found online but none of them do the trick because they all come with an html part as well.
My guess was: the image is already there, I don't need the html part, only assign classes or id's to the images and then give each image the same kind of CSS code.
Am I on the right track with this? And can anyone help me with the code for it?
Many thanks in advance!
add a class, then do some css
for example:
<img class="slider-img">
.slider-img:hover {
{
let me know if you need help with the css.
EDIT:
try this.
wrap each of your images around 2 divs, slider-img and img-wrap:
<div class="slider-img">
<div class="img-wrap">
<img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
</div>
</div>
then do some css:
.slider-img {
width: 200px;
cursor: pointer;
}
.slider-img img {
width: 100%;
}
.slider-img:hover .img-wrap {
background-color: black;
transform: scale(0.7);
-o-transform: scale(0.7);
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.slider-img:hover .img-wrap img{
opacity: 0.5;
}
basically what the css is doing is that when you hover over the main div (.slider-img), the div containing the image (.img-wrap) gets scaled down by 70% by the css -webkit-transform: scale(0.7);
it also gets a background color of black with an opacity of 80%. this gives the darkened image effect.
-webkit-transition: all .5s ease-in-out; gives a smooth transition effect.
if you are wondering why there are 5 different lines of css for the same thing, thats because each line targets specific browsers. -o- is opera, -moz- is firefox etc.
also, make sure to change the .slider-img width to match your needs.
check out the working example on js fiddle:
here
I have no trouble adding animation between route. But when I try something simple as follow:
var IntroSection = React.createClass({
render: function(){
return(
<div id = "intro">
<ReactCSSTransitionGroup transitionName="introFirst" transitionAppear={true} transitionAppearTimeout={1300}>
<span key={"hello"}> Hello, </span>
</ReactCSSTransitionGroup>
[...]
</div>
css:
.introFirst-appear{
opacity: 0;
transform: translateX(-250px);
transition: opacity 10s linear;
}
.introFirst-appear.introFirst-appear-active {
opacity: 1;
transform:translateX(0px);
}
Opacity part works perfectly, but the translateX part doesnt work at all. Nothing moved.
the css for the div #intro, doesnt have anything special, only font, text-align, width, float:right
You're only specifying that opacity should be animated with the transition rule. Alos, according to this anwer, the transform property only applies to block level elements. Try doing this:
.introFirst-appear {
/*...*/
display: inline-block;
transition: opacity 10s linear, transform 10s linear;
}
What I am looking to do is change the translate3d transform of an element while a css3 animation is running on the element. When I try to do this, however, it seems that the animation resets the transform every time right before updating the animation such that the translation is always (0,0,0). I wish to have the animation running and still be able to translate it with javascript such as:
element.style.webkitTransform='translate3d(100px, 30px, 0px)';
I know it would be possible by using a second containing div to set the translation on while the inner div runs the animation, but I would like to be able to just use one div if possible. Do you know how to achieve this?
This is my css as it stands:
.class{
width:32px;
height:32px;
position:absolute;
background: transparent url('./img/sprite.png');
background-size:100%;
-webkit-transform: translate3d(48px, 176px, 0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 100ms;
-webkit-animation:spin .75s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
You can concatenate several transformation functions with a space:
-webkit-transform: translate3d(48px, 176px, 0px) rotateY(30deg) rotateX(10deg);