Develop Reference

Transition between desired amounts

An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?

The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp

I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>

How to transform, translate in this situation?

I want to move div.willshow when var about clicked.
But I click that btn, only It gets class active.
And I click that btn again It lose class. And If I click one more time, every task not working.
CSS
div.willshow {
width:calc(100% - 52px);
height:100%;
margin-left: 52px;
z-index:100;
background-color: white;
position: absolute;
left:-100%;
-ms-transition: -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
}
div.willshow.active {
-ms-transform: translate(-100%, 0); /* IE 9 */
-webkit-transform: translate(-100%, 0); /* Safari */
transform: translate(-100%, 0);
}
Javascript
var about = $('ul.about > li > span');
var willshow = $('div.willshow');
about.click(function(){
willshow.addClass('active');
about.html('close');
about.click(function(){
willshow.removeClass('active');
about.html('about');
});
});

Use a single click event,toggle the text using if in the html function:
about.on('click',function(){
willshow.toggleClass('active');
about.html(function(){
if($(willshow).hasClass('active')) {
return 'close';
}
return 'about';
});
});
demo:https://jsfiddle.net/ztw7uxhy/1/

I think your script will work better makeing something like this
var about = $('ul.about > li > span');
var willshow = $('div.willshow');
var active;
about.click(function(){
if (active!='yes'){
willshow.addClass('active');
about.html('close');
active='yes';
else{
willshow.removeClass('active');
about.html('about');
active='no';
});

In the about click handler you can use jQuery#toggleclass() to set willshow class and then with the use of a Conditional (ternary) Operator you can get the proper about class in a clean way:
var about = $('ul.about > li > span'),
willshow = $('div.willshow');
about.click(function () {
willshow.toggleClass('active');
about.html(willshow.hasClass('active') ? 'close' : 'about');
});

Change `transform-origin` on a CSSTransitionGroup not functioning as expected

I am trying to make a simple component. When a button is pressed, it will show a menu that should slide out from the left. When clicked again, it should slide in from the right. It looks as follows.
I used the following as my enter, enterActive, leave, and leaveActive (respectively).
.open {
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 200ms ease-in;
}
.opened {
opacity: 1;
transform: scaleX(1);
}
.close {
opacity: 1;
transform: scaleX(1);
transform-origin: right;
transition: all 200ms ease-in;
}
.closed {
opacity: 0;
transform: scaleX(0);
}
There is a working codepen here to show the problem.
What I don't get is: how do I make the close animation start from the right, and move left while closing? It seemed like transform-origin was the correct CSS, but it did not work as intended. The initial opening animation was correct, but not the leaving animation.

CSS animation, toggle rotate on click

I am try to have the caret in the following rotate 180 degrees on click for my dropdown menu. In the solution Im trying to implement, it changes the class of the the caret to toggle-up or toggle-down on click. The first time I click on it rotates up, the second time it immediately goes back to its starting position and then rotates back up. I smell dirty code, whats the easiest way to add this toggle rotation animation. Thanks in advance for any help. Heres my current css:
.toggle-up {
animation-name: toggle-up;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
.toggle-down {
animation-name: toggle-down;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
/*animations*/
#keyframes toggle-up {
100% {
transform: rotate(180deg);
}
}
#keyframes toggle-down {
100% {
transform: rotate(180deg);
}
}

You don't really need a keyframe animation for something this simple. If you just add a class to your icon on click then remove it this will apply your rotation. Here is a working plunkr using font awesome and a simple rotation. This is just a simple example, you will want to make use of vendor prefixes and be aware that css transitions do not work in older browsers.
<div id="container">
<i id="icon" class="fa fa-arrow-down"></i>
</div>
.fa-arrow-down{
transform: rotate(0deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(180deg);
transition: transform 1s linear;
}
(function(document){
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var open = false;
div.addEventListener('click', function(){
if(open){
icon.className = 'fa fa-arrow-down';
} else{
icon.className = 'fa fa-arrow-down open';
}
open = !open;
});
})(document);

.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
}
.toggle-up {
transform: rotate(180deg);
}
.toggle-down {
transform: rotate(0);
}
You should have an initial state in order to complete your animation.
Here is the example: codepen
UPDATE
Here is the version without using javascript: codepen
<label for="checkbox">
<input type="checkbox" id="checkbox">
<div class="square toggle-down"></div>
</label>
#checkbox {
display: none;
}
.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
#checkbox:checked + .square {
transform: rotate(180deg);
}
The general idea is to change the block class using Adjacent sibling selectors and the checkbox checked state.

div click resize iframe or underlying div?

i'm not getting a response on a div click just need to know what i'm doing wrong
http://jsfiddle.net/7nF2t/76/
thanks
<div id="click"><br></div>
$('#click').click(function(){
alert('yes');
});

You need to make sure the document is ready before adding your event, e.g. :
$(document).ready(function() {
$('#click').click(function() { alert('yes'); }
});
Damnd, didn't see jsfiddle. xdazz is right.

First if this is jQuery you have to use .click as many guys said.
AND #alpha isn't a CLASS it's an ID
i have changed your CSS, script, and HTML here:
http://jsfiddle.net/7nF2t/89/
<div id="alpha" class="alpha">
<iframe id="iframe" src="http://time.is"></iframe>
</div>
<div id="click"><br></div>​
<script>
$(document).ready(function() {
$('#click').click(function(){
alert('yes');
$('#alpha').removeClass('alpha').addClass('alphas');
});
});
</script>​
#click {
z-index:2;
margin-top:-200px;
height:200px;
width:200px;
background-color:#888;
opacity:0.48;
filter:alpha(opacity=48);
}
.alpha {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transform:scale(0.25);
-moz-transform-origin:0 0;
-o-transform:scale(0.25);
-o-transform-origin:0 0;
-webkit-transform:scale(0.25);
-webkit-transform-origin:0 0
}
.alphas {
opacity:0.38;
filter:alpha(opacity=38);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
​

You are using .onclick in your jsfiddle, use .click instead.
The demo.