Chrome에서 CSS 전환이 작동하지 않습니다.

Mozilla Firefox에서 작동하며 Google 크롬에서는 작동하지 않는 CSS 코드가 있습니다. 모질라 글꼴 색상 전환에서 Chrome에서 CSS 전환이 작동하지 않습니다.

.lightBtn { 
 
    width: 500px; 
 
    height: 49px; 
 
    color: #000000; 
 
    background: white; 
 
    transition-duration: 0.4s; 
 
    -webkit-transition-duration: 0.4s; 
 
    display: inline-block; 
 
    -webkit-transition: all 0.25s; 
 
    transition: all 0.25s; 
 
} 
 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
} 
 
.lightBtn span { 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: 0.25s; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn span:after { 
 
    content: '>>'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    -webkit-transition: 0.25s; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn:hover span { 
 
    padding-right: 25px; 
 
} 
 
.lightBtn:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class="lightBtn" ><span>Special effect</span></button> 
 

 
<p>Hover over the div element above, to see the transition effect.</p>

잘 검정에서 흰색으로 변경 작품과 크롬에서 그냥 지정된 시간이 지나면 흰색으로 변경됩니다. 어떻게 해결할 수 있습니까?

기본 전환을 확인하고 잘 작동하지만 호버에 애니메이션을 추가하는 동안 색상 자체의 전환이 작동하지 않습니다. This is animation I'm trying achieve. 원래는 글꼴 색상이 전환되지 않았습니다. 색상 전환과 애니메이션 모두 별도로 작동하지만, 결합하면 글꼴 색상 전환이 작동하지 않습니다 (Google 크롬에서). Mozilla에서 내가 성취하려고하는 것을 확인할 수 있습니다.

출처

2016-10-06 Karol Oleszek

축하합니다, 당신이 게시물 : –

그것을 위해 어떤 배지는 거기에 버그를 발견 보인다? :) –

나는이 대답에 흥분 아니지만, (여기에 다른 답변처럼 의사 요소 또는 효과의 손실없이) 코드의 아래로 껍질을 벗겼다 버전은 많은 반복 후 mouseIn과로 마우스 일치하지 않는 결과를 보여줍니다 시도. 3 번째 또는 4 번째 호버마다 의사 요소 내용 >>이 즉시 나타나기 시작하고 천천히 고형화됩니다. 나머지 시간은 내가 경험하는 지연이 있습니다.

요약하면 WebKit 렌더링 버그처럼 보입니다. 나는 여기에 하나를 제출했습니다 : https://bugs.webkit.org/show_bug.cgi?id=163078 그래서 일단 진전이 이루어지면 다시 확인해 보겠습니다.

이 pared down 버전은 Special effect 텍스트의 지연을 표시하지 않지만 제거합니다. 나는 그것의 전환 타이밍을 표준화했다.

.lightBtn { 
 
    width: 500px; 
 
    height: 49px; 
 
    color: #000000; 
 
    background: white; 
 
    display: inline-block; 
 
} 
 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
} 
 
.lightBtn span { 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn span::after { 
 
    content: '>>'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.25s; 
 
} 
 
.lightBtn:hover span { 
 
    padding-right: 25px; 
 
} 
 
.lightBtn:hover span::after { 
 
    opacity: 1; 
 
    right: 0; 
 
}

<button class="lightBtn"><span>Special effect</span></button> 
 
<p>Hover over the div element above, to see the transition effect.</p>

출처

2016-10-06 20:27:35 TylerH

FF와 GC의 차이를 확인할 때 WebKit에서 '전환 지속 시간'을 처리하지 못하는 것을 알 수 있습니다. 내가 알아 차 렸던 주된 문제는 글자와 화살표의 '색상'값 사이의 전환이 지연된 것이 었습니다. 그래서, 실제로 WebKit 오류처럼 보입니다. –

-1

가능한 한 코드가 기본이되도록 다른 모든 것들을 제거하면 어떻게됩니까? 이게 효과가 있니? 그렇다면 아마 당신은 아마 어떤 특정 문제 나 그 라인을 따라 뭔가를 정렬해야합니다 ... 또는 아마도 귀하의 크롬 버전이 오래된 것입니다 (하지만 다소 어려울 것으로 보이지만).

크롬 및 FF btw에서 나를 위해 작동합니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.lightBtn { 
    width: 100px; 
    height: 100px; 
color: #000000; 
background: white; 
height: 49px; 
border: 2px solid white; 
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s; 
border-radius: 0px 8px 8px 0px; 
font-size: 16px; 
font-family: Audiowide; 
display: inline-block; 
transition: all 0.25s; 
cursor: pointer; 
} 
.lightBtn:hover { 
    background: black; 
    color: white; 
    border: 2px solid rgba(12, 1, 29, 0.87); 
    box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19); 
} 
</style> 
</head> 
<body> 


<span class="lightBtn"></span> 

<p>Hover over the div element above, to see the transition effect.</p> 

</body> 
</html>

출처

2016-10-06 19:19:45 user6866414

이것은 전환 및 유사 요소에 대한 몇 가지 변경 사항을 포함하는 OP 코드가 아닙니다. – TylerH

음, 몇 가지를 가서 보자

먼저 당신이 그때 당신은 이전의 두 속성에 선언 된 값을 재정의하는 transition: all 0.25s;를 선언, transition-duration: 0.2s; 및 -webkit-transition-duration: 0.2s;를 선언하기에 이동합니다.
transition의 값으로 all이 있는데 성능에 문제가 있으므로 바람직하지 않습니다.
초기 전환 설정에 transition: all .25s;을 설정하고 transition-property: background-color, border, box-shadow, color;으로 속성을 무시하면 전환이 잘 작동합니다.

Here은 기능 코드가있는 JSFiddle입니다.

여기서는 아무 것도 작동하지 않으면 이미 다른 사람이 지적한대로 브라우저가 구식 일 수 있습니다.

출처

2016-10-06 19:21:49

** 1 ** 선언 순서는 중요하지 않습니다. ** 2 ** OP는'background','color','border' 및'box-shadow'를 움직이기를 원합니다. 그래서'all' 만 괜찮습니다. * 모든 속성을 하나씩 선언 할 수는 있지만 지저분 해집니다. *) ** 3. 이징 함수를 정의 할 필요가 없습니다. (* 기본값이 있습니다 *) –

또는 'all' 모두를 모두 선언하기 위해 두 번째 속성을 사용합니다. 요점은 의도하지 않은 속성에 대한 바람직하지 않은 전환을 피하기 위해 'all'을 사용하는 것을 피합니다. 만약 발생한다면 OP를 지금보다 더 혼란스럽게 할 수 있습니다 (예를 들어 * 왜 상자의 크기가 그런 식으로 변화합니까?). –

충분히 정면에 :) –

-1

동일한 ff 및 chrome처럼 보입니다.

.lightBtn { 
 
    color: #000000; 
 
    background: white; 
 
    height: 49px; 
 
    border: 2px solid white; 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-duration: 0.2s; 
 
    border-radius: 0px 8px 8px 0px; 
 
    font-size: 16px; 
 
    font-family: Audiowide; 
 
    display: inline-block; 
 
    transition: all 0.25s; 
 
    cursor: pointer; 
 
} 
 

 
.lightBtn:hover { 
 
    background: black; 
 
    color: white; 
 
    border: 2px solid rgba(12, 1, 29, 0.87); 
 
    box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19); 
 
}

<a class="lightBtn"> 
 
Hi guys! 
 
</a> 
 
<button class="lightBtn"> 
 
    Wassup 
 
</button>

출처

2016-10-06 19:30:13 Onur

코드는 작동하지만 OP 코드는 더 복잡하며 실제로는 그렇지 않습니다. – TylerH

당신이 시간이 될 것입니다

transition-duration: 0.2s; 
-webkit-transition-duration: 0.2s;

0.25s에 대한 필요가 없습니다

transition: all 0.25s;

이있는 경우, 귀하의 경우, 그것은 수 있습니다 귀하의 브라우저 버전, 그것은 나를 위해 작동하기 때문에, 그리고 크롬을 사용하고 있습니다. 시간을 알려주므로 애니메이션을 추가하지 않아도 도움이되는지 확인해보십시오. 그래도 여전히 웹킷 프리픽스가 필요하기 때문에 도움이되는지 생각해보십시오.

-webkit-transition: all 0.25s;

출처

2016-10-06 19:32:23

Chrome에서 CSS 전환이 작동하지 않습니다.

답변

관련 문제