Css3 Transition Click Event

CSS transition on click event from another element

Display is not an animatable property. Try changing the form height or opacity. For example:

form {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
form.hidden {
    opacity: 0;
}

Then just use JavaScript to toggle the class.

Click not completing due to Css Transition

As far as I could understand the issue you want that the icon has two jobs

first expand the search input
after that act like a submit button. Maybe even check if the search input has value. If yes, do the request for example a post via ajax, otherwise do nothing or display a message that the user has to fill in something.

Working with CSS :focus

One problem is that each time you click now on the icon, the search input will lose its focus because your icon is not content of this input. So the :focus you add with CSS will be removed. One solution would be to work with pseudo elements and simply put the icon in the :after or :before content, but since you can't use any of them on inputs, you have to do a workaround to achieve what you want. So in your case I think the only way is to simulate the focus via JavaScript.

You could achieve this with following code

HTML

<div id="search">
  <button id="search-button">
    <i class="ion-ios-search"></i>
  </button>
  <input type="search" id="search-input" />
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #eee;
}

input {
  display: none;
}

#search {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
  font-size: 0;
}

#search-button,
#search-input {
  display: inline-block;
  background: white;
  border: none;
  outline: none;
}

#search-button {
  position: relative;
  width: 40px;
  height: 100%;
  border: none;
  cursor: pointer;
}

#search-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  margin: 0;
}

#search-input {
  height: 100%;
  width: 0;
  font-size: 20px;
  vertical-align: top;
  transition: 0.3s;
  padding: 0;
}

.clicked + #search-input {
  width: 200px;
}

jQuery

var $searchButton = $("#search-button");
var $searchInput = $("#search-input");

$searchButton.click(function() {
  $searchInput.focus();
  if ($searchInput.val() !== "") {
    alert("post");
  } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") {
    $(this).addClass("clicked");
  } else if ($(this).hasClass("clicked") && $searchInput.val() === "") {
    alert("fill");
  }
});

$(document).click(function(e){
  if(!$("#search").has(e.target).length && $searchInput.val() === ""){
    $searchButton.removeClass("clicked");
  }
});

var $searchButton = $("#search-button");

var $searchInput = $("#search-input");

$searchButton.click(function() {

  $searchInput.focus();

  if ($searchInput.val() !== "") {

    alert("post");

  } else if (!$(this).hasClass("clicked") && $searchInput.val() === "") {

    $(this).addClass("clicked");

  } else if ($(this).hasClass("clicked") && $searchInput.val() === "") {

    alert("fill something in");

  }

});

$(document).click(function(e) {

  if (!$("#search").has(e.target).length && $searchInput.val() === "") {

    $searchButton.removeClass("clicked");

  }

});

* {

  box-sizing: border-box;

}

html,

body {

  height: 100%;

}

body {

  margin: 0;

  background: #eee;

}

input {

  display: none;

}

#search {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  height: 40px;

  font-size: 0;

}

#search-button,

#search-input {

  display: inline-block;

  background: white;

  border: none;

  outline: none;

}

#search-button {

  position: relative;

  width: 40px;

  height: 100%;

  border: none;

  cursor: pointer;

}

#search-button i {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 30px;

  margin: 0;

}

#search-input {

  height: 100%;

  width: 0;

  font-size: 20px;

  vertical-align: top;

  transition: 0.3s;

  padding: 0;

}

.clicked + #search-input {

  width: 200px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="search">

  <button id="search-button">

    <i class="ion-ios-search"></i>

  </button>

  <input type="search" id="search-input" />

</div>

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

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.

onclick repeat css transition

You're not removing the bigger class. Remove that first, then remove the show class after a 1 second delay so the transition has time to complete.

function big() {
  document.getElementById("content").classList.add('show');
  document.getElementById("content").classList.add('bigger');
}

function small() {
  document.getElementById("content").classList.remove('bigger');
  setTimeout(()=>{
    document.getElementById("content").classList.remove("show");
  }, 1000);
  document.getElementById("testo").classList.remove('show');
}

function delayed() {
  setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
}

.button {
  position:relative;
  width:100vw;
  height:100vh;
}

.button > button {
  position:absolute;
  left: 50%;
  top:50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color:white;
  background-color:pink;
  border:none;
  padding: 30px;
  cursor: pointer;
}

.button > button:hover {
  background-color: purple;
}

.fixed {
  position:fixed;
  background-color:pink;
  left: 43.6vw;
  top: 29.4vw;
  text-align: center;
  width: 100px;
  height: 75px;
  transition: width 1s, height 1s, left 1s, top 1s;
}

.hidden {
  visibility:hidden;
}

.show {
  visibility:visible!important;
}

.bigger {
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.close {
  border:none;
  background-color: red;
  position:absolute;
  top: 5px;
  right: 5px;
  color:white;
  cursor:pointer;
}

.close:hover {
  background-color: yellow;
  color:black;
}

#testo {
  visibility:hidden;
}

<div class="button">

  <button onclick="big(); delayed()">testing</button>
  <div id="content" class="fixed hidden">
    <p id="testo">just testing this thing</p>
    <button class="close" onclick="small()">X</button>
  </div>
  
  
</div>

CSS transition not working onclick

Here's the working result.

var notificationTimer = 2000; // miliseconds to hide the notification alert

$('.submit-button').on('click', function () {

  $('.notification-alert').addClass('notification-alert--shown');

  setTimeout(function () {

    $('.notification-alert').removeClass('notification-alert--shown');

  }, notificationTimer)

});

.notification-alert {

  color: white;

  bottom: 20px;

  right: 20px;

  position: fixed;

  background-color: #f4b251;

  border-bottom: 4px solid #E89F3C;

  color: #fff;

  padding: 20px;

  border-radius: 14px;

  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  

  transform: translateX(100%);

  transition: all 500ms;

  opacity: 0;

  z-index: -1;

}

.notification-alert--shown {

  opacity: 1;

  transform: translateX(0);

  transition: all 500ms;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="submit-button">show notification</button>

<div class="notification-alert">

  <span>Great job, you're under way!</span>

</div>