CSS 애니메이션 우아한 저하에 대한 간략한 요약 : 웹 프론트 엔드 항목에 대처하기 위해

CSS 애니메이션 우아한 저하에 대한 간략한 요약

CSS 애니메이션 관련 속성

전환 : 호환성

3D 변환 : 호환성

2D 변환 : 호환성

생기:

당신은 지원하지 않습니다 아래 (여기 IE에 초점을) IE8에서 애니메이션을 볼 수 있으며, IE9에만 때문에이 (비 transform3d를) 변환 지원

우아한 저하

<div class="a"></div>

CSS :

web前端开发学习Q-q-u-n： ××× ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<style>
div {
  width: 100px;
  height: 100px;
  background: #3ea5ff;
}
.a { /*a初始化元素动画前样式及加入动画*/
  transform: translate3d(-300px,0,0);/*现代浏览器下移开元素*/
  -ms-transform: translate3d(-300px,0,0);/*IE10+下移开元素*/
  opacity: 0;/*透明元素*/
  opacity:1\9\0; /*IE9hack，是元素不透明*/
  animation: leftIn .7s ease-out forwards;  

}
@keyframes leftIn {
  0% {transform: translate3d(-300px,0,0);opacity: 0}
  100% {transform: translate3d(0,0,0);opacity: 1}
}
</style>

IE9은 자연스럽게 무시를 지원하므로 해킹으로 효율성, 불투명도 및 기타 단순 속성을 낮출 여유가 없다 또한 IE를 번역하지 않기 때문에 주요 영웅은 자연스럽게 translate3d된다.

대신 애니메이션, 또는 위의 예와 JQ :
첫째, 물론, 다음과 같은 기능을 결정하기 위해 CSS 속성을 사용하는 브라우저 지원 결정 여부합니다 :

function isSupportThis(attrName) {
    var prefixs = ['webkit', 'Moz', 'ms', 'o'],
        i,
        humpString = [],
        htmlStyle = document.documentElement.style,
        // 将animation-delay这种带杠转化为htmlStyle中的驼峰属性名
        toHumb = function (string) {
             return string.replace(/-(\w)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
        };

    for (i in prefixs) {
        humpString.push(toHumb(prefixs[i] + '-' + attrName))
    };

    humpString.push(toHumb(attrName));

    for (i in humpString) {
        if (humpString[i] in htmlStyle) return true
    };

    return false
}
isSupportThis('animation') // IE9下false

이 기술을 엔드 웹 프런트에 관심이 작은 파트너는주의가 필요한 실제적인 세부 사항을 개발하기 위해 당신과 함께 몇 가지를 공유하는 학습, 연구 원, 직장의 여섯 번째 년에 추가 할 수 있습니다. 767-273-102 ×××. 제로 기반 프론트 엔드에서 시작하는 방법을 배울 수 있습니다. 사람들의 그룹은 꿈으로, 우리는 다른 도시에있을 수 있습니다,하지만 우리는 함께 걸어 나갈 것이다 끝의 앞쪽 끝

그렇지 않으면, 다음에에 $ ( '. A'), 우리는 좋은 거래처럼 함께 움직이는 요소 뒤에 통일을 원하는 사람들을 전진 할 수없는 애니메이션 요소를 많이하고 매우 복잡한 경우, 물론, 다음 애니메이션을 할 수 animation- 지연과 지연 등도 사용될 수있다 () 대신