Skip to main content
Adicionado imagem de exemplo
Fonte Link
Bruno Romualdo
  • 1,9mil
  • 1
  • 14
  • 20

Imagem de como fica durante a animação: inserir a descrição da imagem aqui

Imagem de como fica durante a animação: inserir a descrição da imagem aqui

removeu 10 caracteres do conteúdo
Fonte Link
Bruno Romualdo
  • 1,9mil
  • 1
  • 14
  • 20
$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
        .btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: .1s;4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 5s;10s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>
$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
        .btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: .1s;
        }
        .btn.active {
            transform: scale(100);
            transition: 5s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>
$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
.btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: 4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 10s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>
Fonte Link
Bruno Romualdo
  • 1,9mil
  • 1
  • 14
  • 20

Animação transform scale "borrando" svg enquanto anima

Estou com um problema para fazer uma animação onde tenho um circle em svg e preciso fazê-lo aumentar até cobrir toda a tela, como um FAB que se transforma em uma div, já fiz uma animação dessa porém com muita gambiarra de background-size e background-position.

O modo mais simples e que tem melhor performance foi usando o transform: scale();, ficou de jeito que eu queria mas aí vem o problema, no Firefox funcionou perfeitamente, porém no Chrome (e no Opera que estou utilizando) o svg fica 'borrado' por assim se dizer enquanto está ocorrendo o scale.
Tem algum modo de corrigir isso nem que tenha que usar alguma biblioteca js ou algo do tipo, pois já tentei de tudo o que eu sei e nada adiantou. Segue o código que estou usando.

$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})
        .btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: .1s;
        }
        .btn.active {
            transform: scale(100);
            transition: 5s;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>

Obs: já tentei usar o código abaixo que encontrei em vários fóruns mas não resolveu:

svg {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}