Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds?

http://jsfiddle.net/AntonTrollback/nqQc7/ 

.icon:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

.icon:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}
jqueryhtmlcssanimationeffects

Answer №1

You have the ability to design CSS animation in a way similar to this EXAMPLE

 @keyframes glow{
  20% {
    opacity: 0.8;
    top: -20%;
    left: -20%;
    transition-property: left, top, opacity;
    transition-duration: 0.8s, 0.6s, 0.2s;
    transition-timing-function: ease-in-out;
  }
  90% {
    opacity: 0.2;
    top: -30%;
    left: -40%;
    transition-property: left, top, opacity;
  }
}

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

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...

htmlcssbordercss-shapes

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'

Hello, I recently tried to install the Jquery plugin known as chosen that allows customization of my <select> tag across different browsers. If you're interested, you can find more information about it here. However, after integrating this plugi ...

javascriptjqueryhtmljquery-plugins

Troubleshooting Bootstrap image alignment problem with columns on extra small screens

My website showcases screenshots of my software in a div element. Everything looks great on larger screens, but once I switch to a phone or resize the window, the images don't align properly, leaving empty space. Refer to the image below for clarifica ...

htmlcssimagetwitter-bootstrap-3alignment

Maximizing the potential of .delegate in combination with .closest

$('.inputRadio').parent().click(function (e) { //implement delegate method here }); Looking for assistance on how to integrate the delegate method in the provided function. Any suggestions? ...

javascriptjquery

Guide on making nested ajax calls and passing object data to controller in ASP.Net MVC 5

I currently have two controllers set up: Settings Controller Action - GetAvailableLocationsFor HomeController Action - Index My goal is to achieve the following steps: Initiate an ajax call to GetAvailableLocationsFor and retrieve object data from t ...

jqueryajaxasp.net-mvcasp.net-mvc-5

Is it possible to utilize one controller within another controller in angularjs?

I am interested in using the Angular JS scrollbar to display content. Here are the controllers I plan to utilize: module.controller('itemsCtrl', function($scope){ $scope.items = [ {src:'../static/images/image-3.png&apos ...

jqueryangularjsangularjs-controller

I keep encountering a 404 error whenever I try to access a controller method using Ajax. What could be causing this

In my ValidationController, there is a method named EmailExist. I made an ajax call to the following URL: $.ajax({ type: "POST", url: "/Validation/EmailExist", data: { 'Email': $('#Email').val() }, success: fun ...

ajaxasp.net-mvcjqueryasp.net-mvc-controller

The load() function is experiencing issues with executing scripts

I have a script on the page where I want to load the file: <SCRIPT type="text/javascript"> $(function() { $("#storefront").click(function () { alert("POTANGINA"); $(".centerdiv").load("storefront_a.php"); ...

jquery

Tailored class designed to handle navigation between preceding and subsequent items

I am in the process of developing a PHP page that includes fields for First Name, Last Name, Address, ZIP, and various others. My goal is to incorporate an 'Add More' button, a 'Previous' button, and a 'Save' button into the p ...

phpjquerymysqlajax

Trouble with parsing JSON data in JQuery getJson callback

Recently, I've encountered a strange issue with using jQuery for JSON. Even though the server is responding correctly to the request, I'm having trouble extracting the data from the JSON response. The server is ASP.MVC and is serializing using J ...

jqueryasp.net-mvcjsongetjson

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

Issue with Jquery .html() not adding content

Utilizing Jquery to dynamically update a list based on dropdown selections. After successfully fetching data and constructing the correct HTML content within the "item" variable, applying .html(item) does not result in the expected HTML updates. <div c ...

jqueryhtml

Why does jQuery only execute the very first condition or none at all if the first condition is false?

I'm trying to create a fixed button that, when clicked, scrolls to a specific section on the page. However, only the first condition seems to be working, and the other conditions are being ignored even when the first one is false. Can you help me figu ...

javascriptjquery

Using Javascript to extract information from the div element

Within my HTML code, I have a total of 4 <div> tags and a corresponding <a> tag for each of these <div> tags. Inside each div tag, there are 2 span tags and an additional a tag. Upon clicking the a tag, I aim to extract the product name ...

javascriptjqueryhtml

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

javascripthtmlreactjsjsx

Issue with embedding Bootstrap modals within other modals

I am facing an issue where opening a modal and then changing the body to a different form using $.ajax. In essence, when the DeleteTaskObjectiveModal triggers the EditTaskModal, it displays a form in the #MainModal. However, all form inputs are malfunctio ...

jquerytwitter-bootstrap

Can JavaScript be used to dynamically assign events to elements on a webpage?

I am currently using the following code: if ( $.support.touch == true ) { $(window).on('orientationchange', function(event){ if ( full == false ) { self.hideAllPanels("7"); } }); } else { $(window).on(&apo ...

javascriptjqueryeventsdynamicevent-handling

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

I am encountering an issue with my PHP code that is causing an error

Whenever I try to submit my form, I keep encountering this error message. Can anyone offer some assistance with this issue? Error: Parse error: syntax error, unexpected '"', expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/u378761662/ ...

phphtmlsqldatabaseforms

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

jqueryhtmlcsstwitter-bootstrap