CSS Property Value How to - transition: left 1s, opacity 1s;

Question

We would like to know how to transition: left 1s, opacity 1s;.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#wrap {<!--  w  w  w .j  a  v  a 2 s. co  m-->
  border: 2px solid;
  height: 150px;
  width: 300px;
  position: relative;
}

#box {
  width: 100px;
  height: 100px;
  background: red;
  opacity: 0.3;
  position: absolute;
  -webkit-transition: left 1s, opacity 1s;
  -moz-transition: left 1s, opacity 1s;
  -o-transition: left 1s, opacity 1s;
  transition: left 1s, opacity 1s;
}

#wrap:hover #box {
  opacity: 1;
  left: 200px;
  height: 150px;
}
</style>
</head>
<body>
  <div id="wrap">
    <div id="box" class="active"></div>
  </div>
</body>
</html>

The code above is rendered as follows: