Css3 Transition on Click Using Pure CSS

CSS3 transition on click using pure CSS

If you want a css only solution you can use active

.crossRotate:active {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO).

$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});

Fiddle

Trigger animation on element click in pure CSS

Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}

Pure CSS method of running an animation through on click

Try this out but you need to use jquery to keep the button active , i didn't used jquery therefore hold the click;

@-webkit-keyframes ripple {  0% {    background-size: 1% 1%;    opacity: 0.5;  }  70% {    background-size: 1000% 1000%;    opacity: 0.2;  }  100% {    opacity: 0;    background-size: 1000% 1000%;  }}
@keyframes ripple {  0% {    background-size: 1% 1%;    opacity: 0.5;  }  70% {    background-size: 1000% 1000%;    opacity: 0.2;  }  100% {    opacity: 0;    background-size: 1000% 1000%;  }}
.button {  background-color: blue;  padding: 12px;  display: inline-block;  border-radius: 5px;  color: white;  font-family: sans-serif;  text-transform: uppercase;  position: relative;  overflow: hidden;}


.button:active:after{  position: absolute;  content: " ";  height: 100%;  width: 100%;  top: 0;  left: 0;  pointer-events: none;  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);  background-position: center center;  background-repeat: no-repeat;  background-color: transparent;  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;  animation: ripple 0.6s 0s normal forwards infinite running ease-in;}

<div class='ripple button'><a href=''>hell</a></div>

CSS3 transition effect with onclick

You can use almost the same approach, just use JS/jQuery to add/remove a class which has all the rules like the hover state.

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

UPDATE

Here is an example: http://jsfiddle.net/Te9T5/
Hover state is removed because it doesn't look good when you have both the hover and the click doing the same thing because you need to hover something in order to click it.

css transition effects on show/hide element using css3

for a transition you need 2 values (start/end) that can be divided by steps, numbers.

none and block can't and can only switch from one to another, you could eventually delay it.

A compromise could be to use max-height and set an overflow in case value is to short.

.showMore {  font-size: 14px;  display: block;  text-decoration: underline;  cursor: pointer;}.showMore + input { display:none;}.showMore + input + * {   max-height: 0;  /*and eventually delay an overflow:auto; */  overflow:hidden;  transition: max-height 0.5s, overflow 0s;}.showMore + input:checked + * {   /* here comes the compromise, set a max-height that would for your usual contents*/   max-height: 5em;  overflow:auto;  transition: max-height 0.5s, overflow 0.5s 0.5s;}

<label class="showMore" for="_1">Heading 1</label><input id="_1" type="checkbox"><div>Hidden 1 Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1</div>
<label class="showMore" for="_2">Heading 2</label><input id="_2" type="checkbox"><div>Hidden2</div>

How to play CSS3 transitions in a loop?

CSS transitions only animate from one set of styles to another; what you're looking for is CSS animations.

You need to define the animation keyframes and apply it to the element:

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Check out the link above to figure out how to customize it to your liking, and you'll have to add browser prefixes.

CSS3 shorthand for transition div 100px from the bottom to the final state

The final state values cannot be appended to the transition property's value like in the code below. The property's values can only be details about which property should be transitioned, the duration of the transition, the delay and timing function etc.

transition: padding 0.25s ease-in-out 1.0s 0 0 100px 0;
                                           ^  
                                           |_ Everything from here on in are incorrect

Another thing to note is, transition is not the right choice for this us-case. Transitions happen only when the properties on an element change due to some action (like :hover, :focus, addition of new class on click using JS etc). There is no pure CSS way to trigger transition on page load. You can use scripting and auto trigger state changes based on time-out but I feel that is unnecessarily complex for something that can be achieved using CSS in a different way.

You have added a delay to the transition but this does not represent the time after which the transition should start automatically. It represents the time that should elapse after the state changes are applied before which the transition can commence.

Animations should be used for automatically triggering changes on page load. Unlike transition, they are auto invoked. You can read more about CSS animations here.

For animating an element from 100px below its final resting position to the top, any one of the following properties could be used:

margin-top
top (can be used for elements with absolute positioning)
translateY()

Using margin-top:

.caption {  display: inline-block;  margin-top: 100px;  /* starting position */  animation: move-up 1s linear forwards;            /* values are [animation-name] [animation-duration] [animation-timing-function] [animation-fill-mode] */}@keyframes move-up {  to {    margin-top: 0px;  /* final resting position */  }}
/* Just for demo */
.caption {  height: 2em;  width: 10em;  line-height: 2em;  background: tomato;}

<!-- library is only to avoid browser prefixes --><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='caption'>This is a caption</div>

Css3 Transition on Click Using Pure CSS