Codit Develop
Codit Develop
Codit Develop
전체 방문자
오늘
어제
  • 분류 전체보기 (146)
    • IT (1)
      • 스마트폰 (1)
    • Game (59)
      • DNF (0)
      • StarCraft2 (11)
      • LostArk (45)
      • Minecraft (3)
      • Elyon (0)
    • Develop (43)
      • Web (15)
      • PHP (2)
      • Laravel (0)
      • C# (11)
      • NodeJS (1)
      • Java (2)
      • Python (1)
      • Cordova (3)
      • Android (0)
      • WPF (1)
      • PowerShell (5)
      • Other (2)
      • Javascript (0)
    • OS (17)
      • Windows (6)
      • Linux (11)
    • Product (17)
      • Docker (10)
      • GitLab (3)
      • NuGet (2)
      • Git (1)
      • Nginx (1)
    • DB (7)
      • All-DB (2)
      • MariaDB (2)
      • MySQL (2)
      • Oracle (0)
      • MSSQL (1)
      • Cubrid (0)
    • PC (2)
      • 견적함 (2)
      • 정보 (0)

블로그 메뉴

    공지사항

    인기 글

    태그

    • 모험의
    • c#
    • 모코코
    • 씨앗
    • html
    • 구릉지
    • docker
    • css
    • 로스트아크
    • 뷰포인트
    • db
    • 개복디
    • Linux
    • 조합
    • JavaScript
    • 유디아
    • 아르테미스
    • MySQL
    • web
    • 오즈혼
    • 디펜스
    • 숨겨진
    • 몬스터
    • 모험의 서
    • 모험의서
    • 서
    • 히든
    • 개인복권디펜스
    • 스타2
    • jQuery

    최근 댓글

    최근 글

    티스토리

    hELLO · Designed By 정상우.
    Codit Develop
    Develop/Web

    [html / css] CSS 애니메이션 변화 시간 설정

    Develop/Web

    [html / css] CSS 애니메이션 변화 시간 설정

    2020. 3. 23. 13:54
    반응형

    transition-duration

     

    hover, focus 등의 css 변경 시 정적으로 변경하는 것에 animation을 추가하여 동적으로 표시할 수 있음. 

     

    1
    2
    3
    4
    5
    6
    7
    .testBox{
        color : blue;
        transition-duration : 0.3s;
    }
    .testBox:hover{
        color : red;
    }    
    cs

    > hover 시 글 색이 blue 에서 red 로 0.3초동안 animation이 적용되어 변경됨

     

    반응형
    저작자표시 비영리 변경금지 (새창열림)

    'Develop > Web' 카테고리의 다른 글

    [HTML / CSS] CSS :not - 부정문  (0) 2018.12.18
    [HTML / CSS] CSS calc() - 수치 연산  (0) 2018.12.15
    [HTML / CSS] CSS기초 3. CSS 연결 (link / import)  (2) 2018.11.22
    [HTML / CSS] CSS기초 2. style 선언자 (tag, id, class)  (0) 2018.11.22
    [HTML / CSS] CSS 기초 1. Style과 CSS  (0) 2018.11.22
    • transition-duration
    'Develop/Web' 카테고리의 다른 글
    • [HTML / CSS] CSS :not - 부정문
    • [HTML / CSS] CSS calc() - 수치 연산
    • [HTML / CSS] CSS기초 3. CSS 연결 (link / import)
    • [HTML / CSS] CSS기초 2. style 선언자 (tag, id, class)
    Codit Develop
    Codit Develop
    내가 보려고 만든 개발 블로그

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.