그라데이션 배경으로 CSS3 전환 사용

호버에서 배경 그라디언트가 희미 해지도록 축소판 위에 CSS로 호버 전환을 시도하고 있습니다. 전환이 작동하지 않지만 간단하게 변경하면 rgba() 값으로 정상적으로 작동합니다. 그라디언트가 지원되지 않습니까? 이미지도 사용해 보았습니다. 이미지도 전환되지 않습니다.

다른 게시물에서와 마찬가지로 가능하다는 것을 알고 있지만 얼마나 정확한지 알 수는 없습니다. 모든 도움말> 다음은 작업 할 CSS입니다.

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

그라디언트는 아직 전환을 지원하지 않습니다 (현재 사양에서는 보간을 통한 그라디언트 전환과 같은 그라디언트를 지원해야하지만).

배경 그라디언트로 페이드 인 효과를 원하면 컨테이너 요소에 불투명도 를 설정하고 불투명도 를 '전환'해야합니다.

(그라디언트 전환을 지원하는 일부 브라우저 릴리스가 있습니다 (예 : IE10). IE에서 2016 년에 그라디언트 전환을 테스트했는데 당시에는 작동하는 것 같지만 테스트 코드가 더 이상 작동하지 않습니다.)

업데이트 : 2018 년 10 월 접두사가 붙지 않은 새로운 구문 (예 : Radial-gradient (...)]을 사용한 그라디언트 전환이 이제 Microsoft Edge 17.17134에서 작동하는 것으로 확인되었습니다. 이것이 언제 추가되었는지 모르겠습니다. 최신 Firefox 및 Chrome / Windows 10에서 여전히 작동하지 않습니다.

한 가지 해결 방법은 그라디언트가 변경되는 효과를주기 위해 배경 위치를 전환하는 것입니다. http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

배경 위치를 사용한 CSS3 그라디언트 전환

CSS 전환 속성을 사용하여 그라디언트를 직접 애니메이션 할 수는 없지만 간단한 그라디언트 애니메이션을 얻기 위해 배경 위치 속성에 애니메이션을 적용 할 수 있습니다.

이것에 대한 코드는 간단합니다.

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

해결책은 그라디언트 전환을 모방 하기 위해 배경 위치 를 사용하는 것입니다 . 이 솔루션은 몇 달 전에 Twitter Bootstrap에서 사용되었습니다.

최신 정보

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

다음은 간단한 예입니다.

연결 상태

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

호버 상태

.btn:hover {
   background-position: 0 0;
}

가치있는 것을 위해, 여기 Sass mixin이 있습니다 :

용법:

@include gradientAnimation(red, blue, .6s);

믹스 인 :

@mixin gradientAnimation( $start, $end, $transTime ){
    background-size: 100%;
    background-image: linear-gradient($start, $end);
    position: relative;
    z-index: 100;
    &:before {
        background-image: linear-gradient($end, $start);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        width: 100%;
        z-index: -100;
        transition: opacity $transTime;
    }
    &:hover {
        &:before {
            opacity: 1;
        }
    }
}

Dave Lunny의 매체에 대한이 멋진 게시물에서 가져온 것입니다 : https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

나는 그것이 오래된 질문이라는 것을 알고 있지만, 누군가는 순수한 CSS로 내 솔루션을 즐긴다. 왼쪽에서 오른쪽으로 그라디언트 페이드.

.contener{
  background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/3d_landscape/9655_3d_landscape.jpg');   width:300px;
  height:200px;
  background-size:cover;
  border:solid 2px black;
}
.ed {
    width: 0px;
    height: 200px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:0;
    transition:width 20s, opacity 0.6s;
}

.contener:hover .ed{
    width: 300px;
    background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));
    position: relative;
    opacity:1;
    transition:width 0.4s, opacity 1.1s;
    transition-delay: width 2s;
    
    animation-name: gradient-fade;
    animation-duration: 1.1s;   
    -webkit-animation-name: gradient-fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
}




/* ANIMATION */
@-webkit-keyframes gradient-fade {
    0%   {background:linear-gradient(to right, rgba(0,0,255,0), rgba(255,0,0,0));}
    2%  {background:linear-gradient(to right, rgba(0,0,255,0.01875), rgba(255,0,0,0));}
    4%  {background:linear-gradient(to right, rgba(0,0,255,0.0375), rgba(255,0,0,0.0));}
    6%  {background:linear-gradient(to right, rgba(0,0,255,0.05625), rgba(255,0,0,0.0));}
    8% {background:linear-gradient(to right, rgba(0,0,255,0.075), rgba(255,0,0,0));}
    10%  {background:linear-gradient(to right, rgba(0,0,255,0.09375), rgba(255,0,0,0));}
    12%   {background:linear-gradient(to right, rgba(0,0,255,0.1125), rgba(255,0,0,0));}
    14%  {background:linear-gradient(to right, rgba(0,0,255,0.13125), rgba(255,0,0,0));}
    16%  {background:linear-gradient(to right, rgba(0,0,255,0.15), rgba(255,0,0,0));}
    18%  {background:linear-gradient(to right, rgba(0,0,255,0.16875), rgba(255,0,0,0));}
    20% {background:linear-gradient(to right, rgba(0,0,255,0.1875), rgba(255,0,0,0));}
    22%  {background:linear-gradient(to right, rgba(0,0,255,0.20625), rgba(255,0,0,0.01875));}
    24%   {background:linear-gradient(to right, rgba(0,0,255,0.225), rgba(255,0,0,0.0375));}
    26%  {background:linear-gradient(to right, rgba(0,0,255,0.24375), rgba(255,0,0,0.05625));}
    28%  {background:linear-gradient(to right, rgba(0,0,255,0.2625), rgba(255,0,0,0.075));}
    30%  {background:linear-gradient(to right, rgba(0,0,255,0.28125), rgba(255,0,0,0.09375));}
    32% {background:linear-gradient(to right, rgba(0,0,255,0.3), rgba(255,0,0,0.1125));}
    34%  {background:linear-gradient(to right, rgba(0,0,255,0.31875), rgba(255,0,0,0.13125));}
    36%   {background:linear-gradient(to right, rgba(0,0,255,0.3375), rgba(255,0,0,0.15));}
    38%  {background:linear-gradient(to right, rgba(0,0,255,0.35625), rgba(255,0,0,0.16875));}
    40%  {background:linear-gradient(to right, rgba(0,0,255,0.375), rgba(255,0,0,0.1875));}
    42%  {background:linear-gradient(to right, rgba(0,0,255,0.39375), rgba(255,0,0,0.20625));}
    44% {background:linear-gradient(to right, rgba(0,0,255,0.4125), rgba(255,0,0,0.225));}
    46%  {background:linear-gradient(to right, rgba(0,0,255,0.43125),rgba(255,0,0,0.24375));}
    48%   {background:linear-gradient(to right, rgba(0,0,255,0.45), rgba(255,0,0,0.2625));}
    50%  {background:linear-gradient(to right, rgba(0,0,255,0.46875), rgba(255,0,0,0.28125));}
    52%  {background:linear-gradient(to right, rgba(0,0,255,0.4875), rgba(255,0,0,0.3));}
    54%   {background:linear-gradient(to right, rgba(0,0,255,0.50625), rgba(255,0,0,0.31875));}
    56%  {background:linear-gradient(to right, rgba(0,0,255,0.525), rgba(255,0,0,0.3375));}
    58%  {background:linear-gradient(to right, rgba(0,0,255,0.54375), rgba(255,0,0,0.35625));}
    60%  {background:linear-gradient(to right, rgba(0,0,255,0.5625), rgba(255,0,0,0.375));}
    62% {background:linear-gradient(to right, rgba(0,0,255,0.58125), rgba(255,0,0,0.39375));}
    64%  {background:linear-gradient(to right,rgba(0,0,255,0.6), rgba(255,0,0,0.4125));}
    66%   {background:linear-gradient(to right, rgba(0,0,255,0.61875), rgba(255,0,0,0.43125));}
    68%  {background:linear-gradient(to right, rgba(0,0,255,0.6375), rgba(255,0,0,0.45));}
    70%  {background:linear-gradient(to right, rgba(0,0,255,0.65625), rgba(255,0,0,0.46875));}
    72%  {background:linear-gradient(to right, rgba(0,0,255,0.675), rgba(255,0,0,0.4875));}
    74% {background:linear-gradient(to right, rgba(0,0,255,0.69375), rgba(255,0,0,0.50625));}
    76%  {background:linear-gradient(to right, rgba(0,0,255,0.7125), rgba(255,0,0,0.525));}
    78%   {background:linear-gradient(to right, rgba(0,0,255,0.73125),,rgba(255,0,0,0.54375));}
    80%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.5625));}
    82%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.58125));}
    84%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.6));}
    86% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.61875));}
    88%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.6375));}
    90%   {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.65625));}
    92%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.675));}
    94%  {background:linear-gradient(to right, rgba(0,0,255,0.75),rgba(255,0,0,0.69375));}
    96%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.7125));}
    98% {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.73125),);}
    100%  {background:linear-gradient(to right, rgba(0,0,255,0.75), rgba(255,0,0,0.75));}
}

<div class="contener" style="">
  <div class="ed"></div>
</div>

다음에서 앵커 태그에는 자식과 손자가 있습니다. 손자는 배경 그라데이션이 먼 가까운 배경의 어린이는 투명하지만 그라디언트가 전환됩니다. 호버링시 어린이의 불투명도는 1 초 동안 0에서 1로 전환됩니다.

CSS는 다음과 같습니다.

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

그리고 이것은 HTML입니다.

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

위의 내용은 최신 버전의 Chrome에서만 테스트되었습니다. 다음은 이전 호버, 반쯤 호버 및 완전히 전환 된 호버 이미지입니다.

그라디언트 전환에 대한 부분 해결 방법은 삽입 상자 그림자를 사용하는 것입니다. 상자 그림자 자체 또는 배경색을 전환 할 수 있습니다. 일반 배경이 방사형 그래디언트로 변경됩니다

.button SPAN {
    padding: 10px 30px; 
    border: 1px solid ##009CC5;

    -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
    -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
    box-shadow: inset 0 0 20px 1px #00a7d1; 

    background-color: #00a7d1;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.button SPAN:hover {
    background-color: #00c5f7; 
}

여기에 대한 몇 가지 답변에 설명 된 것처럼 몇 가지 누적 그라디언트의 불투명도에서 전환을 사용하여 그라디언트 사이의 전환을 FAKE 할 수 있습니다.

그라디언트 CSS3 애니메이션 .

여기에 설명 된대로 대신 위치를 전환 할 수도 있습니다.

background-position을 사용한 CSS3 그라디언트 전환 .

여기에 더 많은 기술이 있습니다.

CSS3 그라디언트 애니메이션 .

코드 요소에서 opacity속성 을 수정 하지만 의사 요소를 활용하여 한 그라데이션에서 다른 그라데이션으로 페이드를 달성 하는 멋진 해킹을 발견했습니다 . 그가하는 것은 :after실제 요소의 불투명도를 변경할 때 :after요소가 페이드 인 것처럼 보이도록 요소를 설정하는 것입니다. 공유하는 것이 도움이 될 것이라고 생각했습니다.

원본 코드 펜 : http://codepen.io/sashtown/pen/DfdHh

.button {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #ca5f5e, #d68584);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
.button:hover:after {
  opacity: 1;
}
.button span {
  position: relative;
  z-index: 3;
}
body {
  text-align: center;
  background: #ddd;
}

<a class="button" href="#"><span>BUTTON</span></a>

귀하의 질문에 CSS 코드를 기반으로 다음과 같은 코드를 시도하고 나에게 도움이되며 (코드 스 니펫을 실행) 직접 시도하십시오.

#container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
     
#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}
    
#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

<div id="container"><div><a href="#"><span>Press Me</span></a></div></div>

귀하의 질문에 CSS 코드를 기반으로 다음과 같은 코드를 시도하고 작동하며 직접 시도하십시오.

    #container div a {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #C0357E, #EE5840);
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

#container div a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #6d8aa0, #343436);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
}

#container div a:hover:after {
  opacity: 1;
}
#container div a span {
  position: relative;
  z-index: 3;
}

그것은 당신을 위해 작동합니까? 필요에 따라 색상을 변경하십시오. :)

: before 및 : after (ie9 +)를 사용해보십시오

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}

명시된 바와 같이. 그라디언트는 현재 CSS 전환에서 지원되지 않습니다. 그러나 어떤 경우에는 색상 중 하나를 투명하게 설정하여 다른 줄 바꿈 요소의 배경색을 비추고 대신 전환하여 해결할 수 있습니다.

나는 이것을 직장에서 사용한다 :) IE6 + https://gist.github.com/GrzegorzPerko/7183390

<element class="ahover"><span>Text</span></a>텍스트 요소를 사용하는지 잊지 마십시오 .

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}

아직 공식적인 방법이 없기 때문에 다른 견해를 게시하는 데 상처를 줄 수 없습니다. 배경 방사형 그래디언트 및 전환 속도를 정의 할 수있는 간단한 jQuery 플러그인을 작성했습니다. 이 기본 사용법은 requestAnimationFrame (매우 부드러운)으로 최적화되어 페이드 인됩니다.

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

원래 배경과 모든 속성을 그대로 유지합니다. 또한 설정으로 하이라이트 추적이 있습니다.

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

div를 3D 구처럼 보이고 색상을 통해 전환하고 싶었습니다. 그래디언트 배경색이 전환되지 않는 것을 발견했습니다. z-index를 사용하여 요소 앞에 방사형 그라데이션 배경을 단색 배경으로 배치했습니다.

/* overlay */
z-index : 1;
background : radial-gradient( ellipse at 25% 25%, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 1 ) 100% );

그 div.ball아래 :

transition : all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

그런 다음 div.ball과 짜잔의 배경색을 변경했습니다 !

https://codepen.io/keldon/pen/dzPxZP