Tips on creating a "CSS3 blink animation" using the visibility attribute

I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop.

According to CSS specifications, the "visible" property is animatable only as "visible." This means there can't be a smooth transition like a fade in and out; I simply want the DIVs to blink on and off. However, my current code isn't working as intended - the DIVs remain constantly visible without any flickering or blinking occurring.

Can anyone provide insight into why this might be happening?

<style type="text/css">
.shape{
    width:36px;
    height:36px;
    position:absolute;
    border-radius:18px;
    box-shadow: 0px 0px 5px 5px rgba(217, 215, 30, 0.5);
    visibility:visible;    
}
.star-anim1 {   
    animation-name:blink;
    animation-direction:normal;
    animation-delay:5sg;
    animation-duration:5s;
    animation-iteration-count:infinite;
}
.star1{
    top:80px;
    left:60px;
}
.star2{
    right:30px;
    top:60px;
}

@keyframes blink{   
   from{
        visibility:hidden;
   }
   to{
        visibility:visible;

    }
}
</style>

</head>

<body>
<div class="container" style="position:relative;">

<div class="star-anim1 shape star1"></div>
<div class="star-anim1 shape star2"></div>
</div>
cssvisibilitycss-animationskeyframe

Answer №1

If you want to incorporate animations into your website, it's crucial to understand the vendor prefixes required for achieving the desired effect.

For detailed information, refer to the documentation.

div{
  -webkit-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
0% {display: blue}
50% {background-color: transparent;color:transparent;}
}
@-webkit-keyframes blink {
0% {background-color: blue}
50% {background-color: transparent;color:transparent;}
}
<div>hello!!!!!!</div>

The CSS animation set in your code begins with a transition from 0% to 50%, making the element visible based on the specified rules, followed by another transition from 50% to 100% that maintains the visibility of the element throughout. Therefore, the element remains constantly visible.

By defining:

@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }

The element stays hidden until 50% and then suddenly appears. To hide it at the end, ensure to apply visibility:hidden to the main stylesheet rule rather than within the keyframes.

.blink_me {
  background: red;
  height: 200px;
  width: 200px;
  -webkit-animation-name: toggle;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: toggle;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  animation-name: toggle;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }
 @-webkit-keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }
<div class="blink_me">everyday i'm toggling!</div>

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

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit

Switch the background color of the body when hovering over a link

Is it possible to change the page background when hovering over a a using only CSS? I am searching for a solution that does not involve any JavaScript. I understand that we can access child elements with CSS, but I am unsure if it is possible to target th ...

htmlcss

Loading a specific CSS file along with an HTML document

Creating a responsive website, I'm looking to incorporate a feature that allows for switching between a mobile version and a standard desktop version similar to what Wikipedia does. To achieve this, I would need to reload the current HTML file but en ...

phpjavascriptcssswitch-statement

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

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

Incorporating an image prior to the "contains" term with the help of JavaScript

Seeking assistance with the code snippet below without altering the text targeted in my "a:contains" statement. The challenge lies in determining the appropriate placement of ::before in the script provided. Link: https://jsfiddle.net/onw7aqem/ ...

javascripthtmljquerycssajax

How to Create a Bootstrap 4 Fixed Bottom Navigation with a Dropup Feature?

After thoroughly researching the site, I have not found a solution that works with this particular approach. In order to create the following template, I utilized Pingendo. .dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: .125rem; ...

htmlcsstwitter-bootstrapbootstrap-4

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

ruby-on-railscssstylesheet

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

htmlcssonclicknavigation

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

Tips for creating distinct hover descriptions for each element in an array

My dilemma may not be fully captured by the title I've chosen, but essentially, I am working with a list of names and I want each one to display a unique description when hovered over with a mouse. On the surface, this seems like a simple task, right ...

javascripthtmljquerycss

Ways to customize the background color of selected items in ion-list on Ionic

I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this? index.html <ion-list> <ion-item ng-repeat="item in familleItems"> <div ng- ...

htmlcsscordovaionic-framework

JavaScript functioning in Firefox but not Chrome

Here is the code snippet in question: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); While this code works correctly in Firefox, it seems to have i ...

javascriptjquerycss

Issues observed when implementing replaceWith() to replace text tags with input field on a web page

Just a simple EDIT request. I want to modify the headers so that when I click on the "edit" icon, the header will change to a text field and the "edit" icon will switch to a "save" icon. $('#editheader').click(function(e){ va ...

jqueryhtmlcss

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

javascriptjqueryhtmlcssanimation

What steps can be taken to enlarge the select button within a <select> field?

Is there a way to enlarge the size of the downward-pointing arrow button within a <select> element? Here is an example of what my code looks like: <select> <option>Select City</option> <option>City1</option> <o ...

htmlcss

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Having trouble with Viewport CSS being restricted by Blogger?

I've been working on configuring my personal blog, which is hosted on Blogger, to properly adapt to the Windows 8 IE snap feature. Through my research online, it has been suggested that I include a @viewport in the CSS. However, it seems like the CSS ...

htmlcssinternet-explorerwindows-8.1blogger

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

Interactive JQuery plugin for scrolling through thumbnails with customizable buttons

I am attempting to create a jQuery thumbnail scroller with buttons that respond to mousedown and mouseup events. I have successfully implemented the scrolling functionality, but I am facing issues when trying to refactor it into a reusable function. Below ...

javascriptjqueryhtmlcss