Can I create personalized animations using Compass?

I am curious about how to convert this code into Compass mixins

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, 0px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, 0px) rotate(-1deg); }
}
.item:hover{
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    /*-webkit-animation-iteration-count: infinite;*/
    -webkit-animation-timing-function: linear;
}

In my research, I have not found much information in the Compass docs regarding this topic

csssasscompass-sasscss-animations

Answer №1

If you are utilizing the main branch (version 0.13.alpha) of compass, or if you have installed the compass-animation plugin, you have access to various animation mixins. Additionally, Compass 0.12 includes mixins for transforms. When combined, your code will resemble the following:

@include keyframes(shake) {
    0% { @include transform(translate(2px, 0px) rotate(0deg)); }
    10% { @include transform(translate(-1px, 0px) rotate(-1deg)); }
    20% { @include transform(translate(-3px, 0px) rotate(1deg)); }
    30% { @include transform(translate(0px, 0px) rotate(0deg)); }
    40% { @include transform(translate(1px, 0px) rotate(1deg)); }
    50% { @include transform(translate(-1px, 0px) rotate(-1deg)); }
    60% { @include transform(translate(-3px, 0px) rotate(0deg)); }
    70% { @include transform(translate(2px, 1px) rotate(-1deg)); }
    80% { @include transform(translate(-1px, -1px) rotate(1deg)); }
    90% { @include transform(translate(2px, 0px) rotate(0deg)); }
    100% { @include transform(translate(1px, 0px) rotate(-1deg)); }
}
.item:hover{
    @include animation(shake 0.8s infinite linear);
    @include transform-origin(50% 50%);
}

This will generate all necessary browser prefixes and adhere to the official syntax, making it compatible with a wider range of browsers beyond just webkit.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to fetch all Firebase database IDs using Angular?

Is there a way to fetch all data from Firebase database along with their respective IDs? Currently, I have two functions - getAll() and get(input) that retrieve specific products based on the given ID. However, my current implementation only returns obje ...

htmlcssangulartypescript

The height of the Bootstrap Sidebar is not displaying correctly

Currently, I am working on developing a traditional sidebar layout for the left portion of my template using Bootstrap 4. Here is the code snippet I have implemented: <nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color: ...

htmlcssbootstrap-4frontendsidebar

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss

Grid sidebar using tailwindcss

I just started using Tailwind CSS, but I'm having trouble understanding how the grid system works! I want my layout to look like this: https://i.sstatic.net/hlHmy.png Here is what I tried, but it's not working as expected: <div class=" ...

htmlcsscss-gridtailwind-css

The border length of the unordered list is equal to half of the length

I would like the blue borders of these "ul" elements to be centered beneath the black "li" elements, with a width that is 50% of the child width. However, I'm unsure about how to achieve this. I attempted using ":before", but it only seems to work for ...

htmlcss

What is the process of transforming a PSD file into a responsive HTML file?

I have a PSD file with multiple images that I need to display on my responsive website. The challenge is that when the images are displayed inside the webpage, their position needs to be set to absolute in order to maintain layout integrity. However, when ...

csshtml

Utilizing deployJava.runApplet for precise element targeting

After years of successfully maintaining an applet that utilizes the traditional: <script src="foo.js"></script> method for embedding a Java applet, we can no longer ignore the need for change. It's time to switch to: deployJava.runAppl ...

javajavascriptcssapplet

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

htmlcssbootstrap-4

Issues with Navigating through a Scrollable Menu

I'm having a difficult time grasping the concept and implementing a functional scrolling mechanism. Objective: Develop a large image viewer/gallery where users can navigate through images by clicking arrow keys or thumbnails in a menu. The gallery an ...

javascriptjqueryhtmlcss

The footer is being covered by the section, despite my attempts to address the issue with

I have noticed a section overlapping issue and I am struggling to figure out the cause. I have attempted using margins and padding to adjust the footer with my .div-wrap, but so far it has not been effective. After searching around, I am still uncertain ...

htmlcss

Finding the nearest span element with a selector in styled components

Currently experimenting with integrating Styled Components to target the nearest span element. <label> <span className="">Password</span> <input type="password" id="passwordInput" /> </label> ...

htmlcssreactjsstyled-components

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Blur transition on CSS-defined borders

Looking to create a large button with a blurred background image that unblurs on hover. I've implemented a container with overflow hidden and adjusted the margin on the background image for defined edges. However, during the transition from blurred t ...

htmlcsscss-transitionscss-filters

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

jqueryhtmlcss

Prevent the movement of the first column in a table when rearranging rows up or down by utilizing

Feeling a bit stuck here, can't seem to figure out what I've missed. I've managed to move up or down a row in a table, but I need the value of the cell in the first column to remain unchanged. Here's my code: This is my HTML file: &l ...

javascripthtmlcssangularjs

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

The style of CSS remains constant within the JSP file

Having trouble updating styles on a JSP page using CSS. Here is the code snippet for linking: <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Profile.css" /> Initially, the styling wo ...

javacssweb

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

Dragging and dropping elements using Jquery to various positions on the screen

I am working on a project with draggable buttons and a droppable textarea. When I drag a button onto the textarea, it displays some code. If I drag another button, the text related to that button is added to the existing code. My query is how can I insert ...

javascriptjqueryhtmlcssjquery-ui