13
votos
Aceito
Efeito deslizante em links 'ancora'
Infelizmente isto não é possível de ser feito usando CSS, para alcançar este efeito pretendido terás que usar Javascript/jQuery.
Eis um exemplo abaixo de como podes fazer isto utilizando jQuery, e ...
12
votos
Como fazer uma Animação em CSS com efeito de arrasto. Colocar blur no movimento
Você pode criar outras bolas para serem o "blur" e alterar apenas o animation-delay e o opacity.
O código abaixo é igual ao seu, apenas adicionei os elementos .blurN e criei as regras para estes ...
11
votos
Aceito
Como fazer uma Animação em CSS com efeito de arrasto. Colocar blur no movimento
A maneira mais "rápida" de adaptar seu código é acrescentando uma "sombra ao contrário".
As cores são um degradê entre a frente e o fundo:
27% {box-shadow:-10px 0 0 #999,-20px 0 0 #777,-30px 0 0 #...
8
votos
Como animar a exibição de elementos de tamanho dinâmico somente com CSS?
Há uns tempos para cá eu criei um artigo sobre este mesmo assunto no meu Blog.
Podes fazer isso utilizando o max-height da seguinte maneira:
.box { max-height: 0; transition: max-height 2s;}
....
6
votos
Aceito
Transformar texto para italico on hover!
Não tem como, primeiro porque o único pseudo-elemento que existe para linhas é o ::first-line e ele só vai pegar a primeira linhas, segundo o font-style diferente do font-weight não suporta valores ...
5
votos
Aceito
Ficar mudando a cor da fonte somente com CSS
É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a ...
4
votos
Aceito
Exibir mensagem e esconder em alguns segundos
Exemplo didático:
// Iniciará quando todo o corpo do documento HTML estiver pronto.
$().ready(function() {
setTimeout(function () {
$('#foo').hide(); // "foo" é o id do elemento que seja ...
4
votos
Aceito
Transition com tempo diferente ao passar o mouse (hover) e ao retirar
Já tentou definir a propriedade de transition nos dois estados do css, uma com mais e outra com menos tempo?
Veja no seu próprio exemplo, ao ativar o hover reduzo o tempo de transição:
img{
...
4
votos
Aceito
Efeito zoom com CSS
É possível resolver isso usando padding e um pseudo-elemento ::after. Vc tem que tirar a cor de fundo da div imagem e usar o pseudo-elemento como cor de backgroud. Depois faz um ajuste de padding para ...
3
votos
Exibir mensagem e esconder em alguns segundos
mostrar uma notificação ao entrar no site e sumir depois de alguns segundos
Usando o Exemplo que você mesmo deu :
$(document).ready(function(){ // A DIFERENÇA ESTA AQUI, EXECUTA QUANDO O ...
3
votos
Aceito
Como fazer scale de uma div sem alterar os elementos filho?
Pode trocar opacity por rgba nos atributos border, ficando assim:
.quadrado{
width: 18.5vw;
margin-left: 5vw;
height: 18.5vw;
overflow: hidden;
float: left;
display: inline-...
3
votos
Aceito
Transição de CSS ignorada quando a ordem da array no v-for muda
O problema que havia era que o .sort() estava a mudar a posição dos elemento no v-for e isso fazia com que o Vue pensasse que se tratava de novos elementos. Configurando a posição à esquerda de outra ...
3
votos
Aceito
Transição em elementos usando :hover:after
Gradientes não suportam transições ainda (embora a especificação diz que eles deveriam).
transição gradiente CSS3 com background-position
Embora você não pode animar directamente gradientes ...
3
votos
Aceito
Minha animação não esta funcionando quando passo o mouse
Cara primeiro, vc tem que por position:relative no container da foto, assim o overlay da sombra que está dentro do container não cobre a tela inteira. Depois, display não é uma propriedade "animável" ...
2
votos
Aceito
Quebra de layout com menu superior em navegadores diferentes
Alterei seu código para :
<!DOCTYPE html>
<html>
<head>
<title>Introdução</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/...
2
votos
Aceito
Rotação de Imagem com CSS
A chamada do css está errada....
<link rel="stylesheet" type="text/css" href="style.css">
2
votos
Aceito
Como faço o transition funcionar na "ida e na volta" ao usar hover?
Ponha a transition no objeto original, e não no :hover:
.novidades{
display:block; height:100px; width:200px; /* só pra demonstrar */
background-color: #f5dcdc;
position: relative;
...
2
votos
Exibir mensagem e esconder em alguns segundos
Não chega a ser necessário Javascript para isto, pode usar somente as animações das CSS visto que você quer exibir a notificação assim que o usuário entrar no site, não quando a página estiver ...
2
votos
Como animar a exibição de elementos de tamanho dinâmico somente com CSS?
Eu fiz uma experiência utilizando função scaleY do transform junto na transição, o efeito não é o mesmo mas "resolve" a questão do height relativo. De repente pode servir como ponto de partida para ...
2
votos
Efeito deslizante em links 'ancora'
Faço usando jQuery
var top = $('#contato').offset.top();
$(window).animation({
scrollTop: top, // Separa condições.
}, 300);
2
votos
Aceito
Erro delay em transição
Use a transition apenas nos elementos necessários.
.service-thumb {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px;
}...
2
votos
Aceito
Animação com imagem em CSS
Na verdade como vc falou que queria mexer pouco no template é possível sim fazer apenas como uma div
Vc consegue o efeito usando apenas uma div e usando a pseudo-class ::after na div Veja o exemplo ...
2
votos
Animação com imagem em CSS
Seguindo o raciocínio fornecido pelo Leandro Angelo, seria uma solução, no entanto como eu não quero modificar muito o template para não ter que usar position, vou busca outro jeito, mas caso alguém ...
2
votos
Aceito
Como adicionar delay para Display:block
Segue uma alternativa.
div {
clear: both;
}
.icon {
position: absolute;
top: 0px;
left: 0px;
height: 32px;
width: 32px;
background-repeat: no-repeat;
background-size:...
2
votos
Aceito
Qual a diferença em usar transition: all e transition: [propriedade específica]?
Cara o grande problema ai é a performance. Usar o transition:all consome muito recurso do browser, pois ele vai "tentar" animar todos os estilos da classe, mesmo que eles não tenham animação, isso ...
2
votos
Como mudar a imagem exibida nas versões Desktop e Mobile de um website
No seu arquivo CSS você pode utilizar Media Query, que possibilita alterar o comportamento do CSS para resoluções diferentes.
Nesse caso o ideal seria ter duas imagens diferentes no seu html.
Sendo ...
1
voto
Como realizar uma transition de "volta" utilizando o Vue Router?
Tem esse exemplo no próprio repositório que como é possível fazer isso. Você precisa passar a animação dinamicamente atráves de uma propriedade. Para definir qual animação usar e quando usar você pode ...
1
voto
Aceito
Como criar a mecânica e aparência do efeito zoom usado no framework reveal.js?
Como tinha te falado esse é um exemplo bem básico, fiz meio na correria, mas acho que vai abrir sua cabeça para ver que só com CSS vc consegue algo bem próximo disso. Com calma e umas linhas a mais de ...
1
voto
Aceito
Posicionamento do texto ao usar -webkit-transition
Eu encontrei a solução pesquisando um pouco e a propriedade flex-shrink resolveu meu problema, ele pode desativar a retração do texto ao ter o valor 0 atribuído. Eu fiz a seguinte alteração no meu CSS:...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
css-transições × 39css × 30
css3 × 15
html × 14
css-hover × 9
javascript × 7
html5 × 7
animação × 4
css-animations × 4
jquery × 3
vue.js × 3
transição × 3
angularjs × 1
wordpress × 1
front-end × 1
rolamento × 1
link × 1
css-font-face × 1
seletores × 1
vue-router × 1
keyframes × 1
animate.css × 1