How can CSS animations be implemented on a diagonal path?

I have developed a unique CSS animation that adds a shiny effect to text. Currently, the effect only works horizontally. I am interested in exploring options to change the direction of the animation to create a diagonal shine effect.

Below is the code I am using:

h1 {

font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 155px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;    
}

@-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: top right;
}
}
csscss-animations

Answer №2

If you switch the top and bottom positions in the ending stage, you can achieve a different effect:

@-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: bottom right;
}
}

However, this change may not be very noticeable since the block element likely extends far to the right beyond the text. This results in a flatter diagonal appearance. Removing the 

-webkit-background-clip: text;

property will reveal the full effect of the h1 and background movement.

To create a more distinct "diagonal" effect, consider reducing the width of the element. Additionally, for a shine effect, using a radial gradient instead of a linear one might be more effective. You can learn more about radial gradients at colorzilla by selecting radial orientation.

Interestingly, your question seems familiar to me :-)

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

Ways to turn off .removeClass()

Encountering an issue with jquery-2.1.4.js. Upon integrating a layerslider into my website, the script modified div classes. Attempted using older versions of the script without success. Currently have classes as follows: <a href="#" class="col-md-3 ...

jqueryhtmlcssremoveclass

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

javascriptjquerycss

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. https://i.sstatic.net/YTHky.png Previously, clicking on user details would take the user to the dashboard.tab ...

javascripthtmlcssangularjstwitter-bootstrap

No visible changes resulting from the CSS file

My project includes a CSS file named default.css, but it doesn't seem to be working or making any changes to my page This is the content of default.css: .feedbackText{ display: none; text-align: center; margin-left: 50px; color: blue; } In the HTML ...

csshtmlbootstrap-4

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

javascriptjqueryhtmlcss

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. https://i.sstatic.net/YN6EO.png These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code- ...

cssangularangular-materialmaterial-design

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

What is the best method for restricting the visibility of an animation to specific regions within an SVG?

I am seeking assistance with adding a "shine" animation to my SVG. I want the animation to only appear within specific parts of the SVG, but I'm uncertain about how to achieve this. Below is what I have accomplished so far. The aim is for the white ...

htmlcssanimationsvg

Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...

cssreactjstypescriptemotion

Position a single div on the left-hand side and arrange two divs on the right using display:flex

Is there a way to achieve this layout without adding another div, using only parents and 3 child elements? I had tried using height: max-content, but it didn't work as expected. .container { display: flex; flex-wrap: wrap; } .item { flex-bas ...

htmlcssflexbox

Looking to display or conceal several divs according to the option selected from a dropdown menu?

I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown: <select id ="category_faq"> <option value="1">item1</option> <option value= ...

javascriptjqueryhtmlcss

CSS causing navigation bar drop down content to be hidden when hovering

I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here? HTML-: <div id="nav_wrapper"> ...

htmlcss

Experiencing blank areas when I try to minimize the screen while using Chrome

While using Chrome, my webpage looks perfect in normal mode. However, when I minimize the screen, white space appears at the bottom and some content gets hidden. The page is built using reactjs, html, and css. Interestingly, it works fine for IE in both no ...

htmlcssreactjs

Exploring the differences between two CSS style attributes using JQuery

Can someone help me with a quick question about CSS? I need to compare two style attributes, specifically margin-left. If the margin-left is less than 500px, I don't want to make any changes. However, if it's greater than 500px, I want to add ano ...

javascriptjqueryhtmlcss

Hiding the SVG element with pattern definitions using the 'display: none' property makes the patterns completely disappear from view

When I include a set of SVG definitions at the top of my body, I encounter an issue where the svg tag with zero height and width creates unnecessary space at the beginning of the document. To resolve this, I initially use display:none, but this leads to pr ...

htmlcsssvg

After saving a rich field in Microsoft Sharepoint, I noticed that a new "External Class" was automatically added to my CSS

Although I am new to Sharepoint, I have experience in HTML and CSS. I recently created a mini HTML application that changes the pictures of hyperlinks on hover. It works perfectly when run on a normal browser outside of Sharepoint. However, the issue aris ...

htmlcssclasssharepointexternal

What is the best way to decrease the font size of every element in the DOM?

Is there a way to decrease the size of all DOM elements by a specific amount? Currently, I am using Bootstrap styles where h5 is set at 14px and I need it to be 12px, and h1 is at 36px when I want it to be 34px, and so forth. I have considered two option ...

csstwitter-bootstrapcross-browser

Is it recommended to directly embed the CSS into the HTML of a specific view?

I have been immersed in a personal project that involves multiple HTML views and CSS files. Up until now, I have been consolidating all the CSS files into one "global.css" and linking this file to my index.html. However, with some friends joining the proje ...

htmlcssimportfrontendcoding-style

I am trying to center align this image, but for some reason, it's not cooperating

Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...

htmlcss

Creating a space for showcasing error messages in Angular and CSS

How can I display an error message min 3 char at the bottom of an input field when only 1 character is entered? Referencing this example: https://i.sstatic.net/Eujle.png Currently, the error message appears on the right side of the input field. https:/ ...

cssangularjs