css-animations

Effect of skirting edge of a div, as if drawing "by hand"

I want to make a border effect, that in the hover of a square div, the border is "drawn", comes out of the top left of the di ... border with a pen). Can be with svg or with pure css3. I hope I have been clear, any questions ask me! Thank you right now.

Animated Banner with HTML5

Good afternoon guys, I received a request to create an animated banner in HTML5. I created the banner using HTML and CSS, and ... r"/> <img src="https://mancilha.files.wordpress.com/2008/09/teste2.png" class="fundo-logo-banner"/> </div>

How does Cubic-Bezier work in CSS animations?

When we are going to make an animation with CSS we have several parameters that we can use. Ex: animation-name: none anima ... 175, 0.885, 0.32, 1.275); } @keyframes box { to { margin-left: 50%; } } <div class="box"></div>

CSS effect: floating label in form does not work without required attribute

I'm using the floating effect on a form to move the label when the user clicks input or select. The problem is that the feat ... class="bar"></span> <label for="cidade">Cidade</label> </div> </div> </form>

Keep CSS Animation final effect

I'm doing a loading screen and at the end of the effect, the value of css that should be kept, is the value that is in the 10 ... top: -10vh } 50% { top: -40vh; left: 50%; } 100% { top: -50vh; right: inherit; left: 0; } }

Zoom effect with CSS

I have a div with an image on which I applied a zoom effect and a slight rotation! but this image should zoom and rotate with ... otate(-5deg); } <div class="imagem"> <img alt="folder" src="https://i.imgur.com/7s6gp01.jpg"/> </div>

Mobile flip card version

Good Afternoon, I created a version of a section to appear only in the small screen version, a flip card, but when opened o ... <!-- End Team Item --> </body> </html>

Radar effect with CSS

I'm trying to make a "radar" animation around an image using only CSS with @keyframes. I even managed to come up with a resul ... g after the other, because there would be a perfect synchronization. Is it possible and how could I do this with @keyframes?

How to change the image displayed on the Desktop and Mobile versions of a website

I needed the desktop version of a website to display an image and the mobile version to display another image. Being that on ... . The page is this: Https://www.boutiqueinfantil.com.br/black-friday I don't have much programming experience.

Infinite Preloader

I applied a preloader on a site but it "doesn't shut down" so to speak. $(window).on('load', function () { $('#pre ... An error that appears is: Preloader.js: 2 Uncaught ReferenceError: $ is not defined at preloader.js: 2

Return element to starting position in hover css

I am doing an animation on a logo, where each letter goes to one side and when I hover the mouse over the div where it is, al ... 1fd30c78cd184c2e5167370.jpg"> </div> Follow pen link: https://codepen.io/maukruger/pen/RwbajVL?editors=1100

With CSS is it possible to animate text-decoration?

I recently saw this animation made with SVG, But I was wondering, Is it possible to animate text-decoration-style: wavy i ... cumentation on text-decoration-style: wavy https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-decoration-style#Valores