[CSS] transition, transition-delay, transform, calc vendor prefix

[CSS] transition, transition-delay, transform, calc vendor prefix

#1. transition / transition-delay vendor prefix

transition 은 IE10부터 지원한다.

 

vendor prefixes

-webkit-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
-moz-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
-o-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

transition

 

 

vendor prefixes

마찬가지로 transition-delay도 IE10부터 지원되며 transition과 prefix가 같다.

-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;

transition-delay

 

 

#2. transform prefix

vendor prefixes

-webkit-transform: value;
-moz-transofrm: value;
-ms-transform: value;
-o-transform: value;
transform: value;

transform

 

 

#3. calc prefix

MDN-calc

 

vendor prefixes

width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);

 

calc jquery로 변환하는 방법

<style>
  #foo { width: calc(100% - 100px); }
</style>
<script>
  $('#foo').css('width', '100%').css('width', '-=100px');
</script>

css calc jquery