[전단 스타일] css/js 상용 애니메이션 (一) 이동 애니메이션 효과(위조+transition+transform+animation)

문서 목록

1. 상용 개념 구분

2. 이동 애니메이션 실현

1.transition+:hover 위조 이미지 부상 이동 애니메이션 구현

2.화면으로 마우스 이동

셋째, 원소 변형

1.requestAnimationFrame 진행 표시줄 생성

1. 상용 개념 구분transform（ ） - 속성을 조합하여 한 개/여러 개의 속성 값만 설정하고 빈칸을 구분할 수 있습니다.속성 정의 요소 / : 다섯 개의 하위 속성을 정의할 수 있습니다.

이동translate

스케일링 스케일

회전rotate

비뚤어진 skew

매트릭스 변형 matrix 요소

translate（ ）-transform의 속성 값으로 원소를 정의하는

translate(x, y) 두 좌표를 동시에 이동하여 백분율

사용 가능

translateX(x) 일방향 이동

translate3d(x, y,z) 정의 3D 이동

transition（ ）-정의 는 약자 속성으로 네 개의 하위 속성을 정의할 수 있습니다.

transition-property는 과도 효과를 설정하는 CSS 속성의 이름을 규정합니다.

transition-duration은 과도 효과를 완성하는 데 몇 초나 밀리초가 걸리는지 규정한다.

transition-timing-function에서 속도 효과를 규정하는 속도 곡선.

transition-delay는 과도 효과가 언제 시작되는지 정의합니다.

animation（ )animation 정의 keyframe , 속성은 여섯 개의 애니메이션 하위 속성을 설정하는 데 사용되는 약자 속성입니다.

animation-name 선택기에 귀속되어야 하는 키프레임 이름

animation-duration은 애니메이션을 완성하는 데 걸리는 시간을 초 또는 밀리초로 계산한다.

animation-timing-function은 애니메이션의 속도 곡선을 규정한다.

animation-delay는 애니메이션이 시작되기 전의 지연을 규정한다.

animation-iteration-count는 애니메이션이 재생되어야 하는 횟수를 규정한다.

animation-direction은 애니메이션을 번갈아 반대로 재생해야 하는지를 규정한다.

(Pseudo-classes) 서로 다른 상태의 원소에 대응하는 양식을 추가하고 짝퉁(:)으로 위류를 표시한다.

: 호버가 마우스를 링크에 놓은 상태

:active 선택한 링크

문서 트리에 없는 요소를 만들고 스타일을 추가하는 데 사용합니다.짝퉁(::)/(:)로 위조원소 표시

: before는 원소의 내용 앞에 추가로 생성된 내용을 삽입한다

: after가 요소 내용 뒤에 추가로 생성한 내용을 삽입

:first-line은 텍스트의 첫 줄에 특수한 스타일을 설정하고'first-line'위조 요소는 블록급 요소에만 사용할 수 있습니다.

:first-letter가 텍스트의 알파벳에 특수 스타일을 설정합니다

: 마우스 키보드 등 선택한 텍스트 부분에 selection 적용

2. 이동 애니메이션 실현
1.transition+:hover 위조 이미지 부상 이동 애니메이션 구현

js나 jquery 요소가 픽셀로 이동하면 핸드폰의 이동 효과가 끊긴다

CSS3 transition을 이용하여 원활한 이동 애니메이션을 쉽게 실현할 수 있다

원시원소.floatBox 설정 스타일을 원래 위치로 되돌리는 효과, 효과에 대한 변환 시간 설정

.floatBox:hover 좌측 이동 효과 설정, 띄우기 시 터치

css 코드:

/*      */
.floatBox {
    width: 300px;
    background-color: rgb(221, 143, 143);
    /* x=0        */
    transform: translateX(0);
    /*      0.4s     */
    transition: transform 0.4s;
}

/* hover   */
.floatBox:hover {
    /* x=-10px    10px */
    transform: translateX(-10px);
    /* 0.4s  transform    */
    transition: transform 0.4s;

}

효과 표시: height ='500'width ='900'scrolling ='no'title ='transition+hover 모바일 애니메이션 구현'src='//codepen.io/juwuyu/embed/MRezYe/?height=510 & theme-id=36604 &default-tab=css,result'allowfullscreen ='true'>'true'> See the Pen the Pen transition+hover 모바일 애니메이션 구현juwuwu @yuw Penuw @ Penuw
2. 마우스를 화면으로 옮겨 위로 이동
아이디어:

용기의 폭이 고정되고 높이는 서브원소에 따라 변화

img설치높이 138px,title설치높이 28px

title 설정margin-top: -28px;이 위치 이동을 실현하고img와 중첩

용기 위류:hover title 설정 ，line-height，margin-top 세 항목을 채우고 전체 중첩 + 텍스트 중심 효과 실현

img 및 title 설정transition: 0.4s;

css 코드:

/* 2.           */
.img-wrapper {
    width: 300px;
}

.img-wrapper .img {
    height: 138px;
    background-color: rgb(221, 143, 143);
}

.img-wrapper .title {
    /* margin-top     ，       */
    margin-top: -28px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    background-color: rgba(222, 134, 57, 0.8);
    /*          */
    transition: 0.4s;
}

.img-wrapper:hover .title {
    /* margin-top -     ，     */
    margin-top: -138px;
    text-align: center;
    /* height+linehright       */
    height: 138px;
    line-height: 138px;
    background-color: rgba(222, 134, 57, 0.8);
    /*          */
    transition: 0.4s;
}

효과 표시: height = 500 width = 900 scrolling = "no"title = "XQKyyE"src = "//codepen.io/juwuyu/embed/XQKyE/? height=434 & theme-id=36604 &default-tab=css, result"allowfullscreen = "true"> See the Pen XQKyy E by juwuwyu(@juwyuon) CoudePen.
참조:https://blog.csdn.net/u012767607/article/details/80481933
3. 원소 변형
1. requestAnimationFrame 진행 표시줄 생성
아이디어:

requestAnimationFrame 브라우저가 다음 리셋을 하기 전에 지정한 리셋 함수를 호출하여 애니메이션을 업데이트합니다. 리셋 호출은 유창한 애니메이션을 실현할 수 있습니다

timer 타이머 표지 저장, 타이머 제거에 사용

재회전 함수에서 너비가 큰지 먼저 판단500px

작음, 애니메이션 종료 없음, 스타일 수정, 귀속 호출requestAnimationFrame

보다 크고, 애니메이션 종료, 타이머 지우기cancelAnimationFrame(timer)

js 코드:

var timer;//   id
var btn = document.getElementById('btn')
  btn.onclick = function() {
    myDiv.style.width = "0";
    cancelAnimationFrame(timer);//     
    timer = requestAnimationFrame(function fn() {
      if (parseInt(myDiv.style.width) < 500) {//    500，    
        myDiv.style.width = parseInt(myDiv.style.width) + 5 + "px";
        myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + "%";
        timer = requestAnimationFrame(fn);//       
      } else {
        cancelAnimationFrame(timer);//    500，     
      }
    });
  };

효과 표시: height="500"width="900"scrolling="no"title="animation-frame 생성 진행률 게이지"src="//codepen.io/juwuyu/embed/pBldao/?height=300&theme-id=36604 &default-tab=js,result"allowfullscreen="true"true"> See the Penanimation-frame 생성 진행률 게이지 by juwuwuuuyu(@Penyuw)