포스트에 CSS Transition 적용하기

<style>
div #box1{
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div #box1:hover {
  width: 300px;
}

div #box2{
  width: 100px;
  height: 100px;
  background: red;
  border-radius : 4px;
  
  transition-property: border-radius, width, background, transform;
  transition-duration: 0.3s
}

div #box2:hover {
  width: 100px;
  background: orange;
  border-radius : 4px 4px 90px 4px;
  transform: rotate(-15deg) scale(0.85);
}

</style>
 <style>태그에 css 코드를 작성하여 에디터 가장 첫 부분에 붙여넣는다
 

티스토리에 포스트 작성시, 해당 포스트에만 css를 적용 시키고 싶을때가 있는데
검색을 해보니 외부의 css파일을 불러오는식으로도 적용하는 방법이 알려져 있었다.
글작성시에 바로 css를 같이 작성하는건 안되려나 궁금해서 css 트랜지션을 적용하는 실험을 해보았다.

티스토리 글작성시에 에디터를 html모드로 하고, 위와 같은 코드를 상단에 넣어주면 css가 먹힌다..
단 주의할점은, 다른 모드로 갔다가 다시 돌아오면 다 사라져있는 경우가 있다.
사실 그래서 잘 사용할것 같지는 않다.

예시1

div #box1{
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div #box1:hover {
  width: 300px;
}

<div id="box1"></div>

 위의 박스에 마우스 커서를 올려보면 css적용이 된것을 알수있다. 

예시2

div #box1{
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div #box1:hover {
  width: 300px;
}

<div id="box2"></div>

 여러 속성들을 한꺼번에 변하게 하는것도 transition을 이용해서 가능하다.

transition과 관련된 속성들

transition

transition-delay

transition-duration

transition-property

transition-timing-function

참고

W3schools의 자료에 설명과 예시가 잘 나와있어서 종종 참고로 하고있다.

[Css Tutorial] transitions

[Css Reference] transition property