{"id":14113,"date":"2012-06-29T23:01:00","date_gmt":"2012-06-29T15:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14113"},"modified":"2025-04-04T01:10:10","modified_gmt":"2025-04-03T17:10:10","slug":"css3-animation-advanced-marquee","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/","title":{"rendered":"How to Advanced Marquee Effect with CSS3 Animation"},"content":{"rendered":"<p>Today we are going to take a look at <strong>\u201cmarquee\u201d<\/strong> once again. We actually have covered about it in our <a href=\"https:\/\/www.hongkiat.com\/blog\/css-marquee\/\">previous post<\/a> which talked about using the <code>-webkit-marquee<\/code> property, but this time we will take this subject a little further.<\/p>\n<p>In this post, we are going to create a <em>marquee-like<\/em> effect using the <a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">CSS3 Animation<\/a>. That way we will be able to add more functionalities that could not be attained with only the <code>-webkit-marquee<\/code>.<\/p>\n<p>Unless you are already familiar with the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-animations\/\">CSS3 Animation module<\/a>, we recommend you take a look at the following references before proceeding with this documentation:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\">CSS3 Animations<\/a> \u2013 W3School <\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en\/CSS\/CSS_animations\">CSS Animations<\/a> \u2013 Mozilla Dev. Network <\/li>\n<\/ul>\n<p>Also take a note that, at the moment, CSS3 Animation can only work in Firefox 8+, Chrome 12+ and Safari 5.0+ with the prefixed version (<code>-moz-<\/code> and <code>-webkit-<\/code>). However, we will only use the official version from W3C without the prefix to avoid overstuffing this article with superfluous codes.<\/p>\n<h2>Addressing Marquee Issue<\/h2>\n<p>One of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Marquee_element#Usability_problems\">problems with marquee<\/a> is that the text is continuously moving. This behavior is disruptive to reading, and the text is also difficult to read. This time, we will try to create our own version of marquee and make it user-friendlier. For example; instead of having the text move continuously, <strong>we will stop it when it is fully visible, so the user can read the text for a moment<\/strong>.<\/p>\n<h2>The Storyboard (sort of)<\/h2>\n<p>Every creative and design creation, like a logo, an illustration or a website, usually starts with a sketch. In the field of animation production, this is done with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Storyboard\">a storyboard<\/a>. Before we start on any coding, we will first create a <strong>sort of storyboard<\/strong>, to help us visualize our animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg\" width=\"500\" height=\"600\"><\/figure>\n<p>As you can see from the above storyboard, we plan to show only two lines of text, which will both move sequentially from the right to the left.<\/p>\n<p>Our storyboard is not as complicated as a storyboard for real animation movie, but the point is: we are now able to visualize how our marquee will look like.<\/p>\n<h2>The HTML Markup<\/h2>\n<p>Since our animation is going to be simple, the <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\">HTML markup<\/a> will also be as simple as:<\/p>\n<pre>\r\n&lt;div class=\"marquee\"&gt;\r\n    &lt;p&gt;How to add WordPress Related Posts Without Plugins&lt;\/p&gt;\r\n    &lt;p&gt;Automate Your Dropbox Files With Actions&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n <\/pre>\n<h2>The Basic Styles<\/h2>\n<p>Before working around the animation stuff, let\u2019s add some basic styles. Let\u2019s start off by adding <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.toptal.com\/designers\/subtlepatterns\/?p=1315\">a background texture<\/a> for the <code>html<\/code> element.<\/p>\n<pre>\r\n html {\r\n background: url('..\/images\/skewed_print.png');\r\n }<\/pre>\n<p>Next, we will place the marquee at the center of the browser window as well as add some details like inner shadow, background color and borders.<\/p>\n<pre>\r\n.marquee {\r\n    width: 500px;\r\n    height: 50px;\r\n    margin: 25px auto;\r\n    overflow: hidden;\r\n    position: relative;\r\n    border: 1px solid #000;\r\n    background-color: #222;\r\n    -webkit-border-radius: 5px;\r\n    border-radius: 5px;\r\n    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);\r\n    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);\r\n}\r\n<\/pre>\n<p>Then, we will position the text \u2013 which in this case is wrapped inside a paragraph tag \u2013 absolutely, and since the <code>absolute<\/code> position will cause the element to collapse, we will have to define the width\u2019s element to <strong>100%<\/strong> so as to cover its parent\u2019s width.<\/p>\n<pre>\r\n.marquee p {\r\n    position: absolute;\r\n    font-family: Tahoma, Arial, sans-serif;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    line-height: 50px;\r\n    text-align: center;\r\n    color: #fff;\r\n    text-shadow: 1px 1px 0px #000000;\r\n    filter: dropshadow(color=#000000, offx=1, offy=1);\r\n}\r\n<\/pre>\n<p>Let\u2019s take a look at the result for a while.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-styles.jpg\" width=\"500\" height=\"250\"><\/figure>\n<p>At this point, we have done with all the basic styles we need; you are free to add more or personalized the styles. But, we suggest you stick with our specified marquee dimension (the height and the width) until the end of the tutorial.<\/p>\n<h2>The Animation<\/h2>\n<p>In short, animation is a presentation of moving objects. Each movement is defined in a time frame. So, when we are working on animation, we are mostly dealing with the <strong>Time<\/strong>. We take into account matters like:<\/p>\n<ul>\n<li>When does the object start moving?<\/li>\n<li>How long does it take for the object to move from one point to another?<\/li>\n<li>When and how long should the object remain at a given point?<\/li>\n<\/ul>\n<p>In CSS3 Animation, the <strong>time<\/strong> can be defined with the <code>@keyframe<\/code> syntax. But, before jumping into this section, let\u2019s first specify the marquee text starting position.<\/p>\n<p>We have planned that the text will start from the right then move to the right. So, here we will first position it to the right using the <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a> Transformation property.<\/p>\n<pre>\r\n.marquee p {\r\n    transform: translateX(100%);\r\n}\r\n<\/pre>\n<p>Remember, the <strong>100%<\/strong> that we have defined for our paragraph element was equal to its parent <code>width<\/code>. So, the same will also be applied here; the paragraph element will be <em>translated<\/em> to the right for <strong>100%<\/strong> which in this example is equal to <strong>500px<\/strong>.<\/p>\n<h3>Keyframes<\/h3>\n<p>The <code>@keyframe<\/code> syntax may be a bit puzzling for some people, so here we have created a simple <a href=\"https:\/\/www.hongkiat.com\/blog\/how-to-make-an-interesting-user-guide-hint-comic\/\">visual guide<\/a> to help you easily understand what is happening in the <code>@keyframe<\/code> syntax.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-keyframes-small.jpg\" width=\"500\" height=\"250\"><\/figure>\n<p><em>Click here to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-keyframes.jpg\">see the larger version<\/a>.<\/em><\/p>\n<p>The whole animation will last about <strong>20 seconds<\/strong> and is divided into two sequences lasting <strong>10 seconds<\/strong> each.<\/p>\n<p>In the first sequence, the first text will instantly slide-in from the right and remain visible momentarily to let the user read the text, while the second text will remain hidden. In the second sequence, the first marquee text will slide-out to the left, and the second text will immediately slide-in from the right.<\/p>\n<p>And here are all the keyframe codes we need to apply to run the animation.<\/p>\n<pre>\r\n@keyframes left-one {\r\n  0% {\r\n    transform: translateX(100%);\r\n  }\r\n  10% {\r\n    transform: translateX(0);\r\n  }\r\n  40% {\r\n    transform: translateX(0);\r\n  }\r\n  50% {\r\n    transform: translateX(-100%);\r\n  }\r\n  100% {\r\n    transform: translateX(-100%);\r\n  }\r\n}\r\n\r\n@keyframes left-two {\r\n  0% {\r\n    transform: translateX(100%);\r\n  }\r\n  50% {\r\n    transform: translateX(100%);\r\n  }\r\n  60% {\r\n    transform: translateX(0); \r\n  }\r\n  90% {\r\n    transform: translateX(0); \r\n  }\r\n  100% {\r\n    transform: translateX(-100%);\r\n  }\r\n}\r\n<\/pre>\n<p>The <code>left-one<\/code> keyframes will define the first sequence of the animation, while the <code>left-two<\/code> keyframes will define the second sequence.<\/p>\n<h3>Applying Animation to the Elements<\/h3>\n<p>For the animation to work, don\u2019t forget to apply the animation to the element. The first sequence is applied for the first text or in this case first paragraph and the second sequence is applied for the second paragraph as well.<\/p>\n<pre>\r\n.marquee p:nth-child(1) {\r\n    animation: left-one 20s ease infinite;\r\n}\r\n\r\n.marquee p:nth-child(2) {\r\n    animation: left-two 20s ease infinite;\r\n}\r\n<\/pre>\n<h2>Bonus<\/h2>\n<p>We can also define the marquee text to move it from top to bottom or vice versa, just like we did in our previous post. Here is how to do it; replace our above Animation codes with this one below to <strong>move the text downwards<\/strong>:<\/p>\n<pre>\r\n.marquee p {\r\n    transform: translateY(-100%);\r\n}\r\n\r\n@keyframes down-one {\r\n    0% {\r\n        transform: translateY(-100%);\r\n    }\r\n    10% {\r\n        transform: translateY(0);\r\n    }\r\n    40% {\r\n        transform: translateY(0);\r\n    }\r\n    50% {\r\n        transform: translateY(100%);\r\n    }\r\n    100% {\r\n        transform: translateY(100%);\r\n    }\r\n}\r\n\r\n@keyframes down-two {\r\n    0% {\r\n        transform: translateY(-100%);\r\n    }\r\n    50% {\r\n        transform: translateY(-100%);\r\n    }\r\n    60% {\r\n        transform: translateY(0); \r\n    }\r\n    90% {\r\n        transform: translateY(0); \r\n    }\r\n    100% {\r\n        transform: translateY(100%);\r\n    }\r\n}\r\n<\/pre>\n<p>Notice that we have changed the <strong>X-axis<\/strong> to <strong>Y-axis<\/strong> and flip all the <code>translation<\/code> negative value to positive and vice versa.<\/p>\n<p>We also have <strong>renamed the Animation<\/strong> to <code>down-one<\/code> and <code>down-two<\/code>, so we need to re-apply the Animation name in the paragraph element as well.<\/p>\n<pre>\r\n.marquee p:nth-child(1) {\r\n    animation: down-one 20s ease infinite;\r\n}\r\n\r\n.marquee p:nth-child(2) {\r\n    animation: down-two 20s ease infinite;\r\n}\r\n<\/pre>\n<p>Or else, if you want to move it the opposite; <strong>from bottom to the top<\/strong>. Here are all the codes you need to apply:<\/p>\n<pre>\r\n.marquee.up p { \r\n    transform: translateY(100%);\r\n}\r\n\r\n.marquee.up p:nth-child(1) {\r\n    animation: up-one 20s ease infinite;\r\n}\r\n\r\n.marquee.up p:nth-child(2) {\r\n    animation: up-two 20s ease infinite;\r\n}\r\n\r\n@keyframes up-one {\r\n    0% {\r\n        transform: translateY(100%);\r\n    }\r\n    10%, 40% {\r\n        transform: translateY(0);\r\n    }\r\n    50%, 100% {\r\n        transform: translateY(-100%);\r\n    }\r\n}\r\n\r\n@keyframes up-two {\r\n    0%, 50% {\r\n        transform: translateY(100%);\r\n    }\r\n    60%, 90% {\r\n        transform: translateY(0); \r\n    }\r\n    100% {\r\n        transform: translateY(-100%);\r\n    }\r\n}\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Despite the lack of current browser support, CSS3 Animation, if done properly, will undoubtedly solve many usability issues in the future, like we have done in this example. If we need only a short animation intended for modern browsers, using CSS3 Animation is probably better than having to load a jQuery script.<\/p>\n<p>Lastly, we are aware that this article may be a bit overwhelming for some people, so if you have any questions regarding this article, feel free to post it in the comments section below.<\/p>","protected":false},"excerpt":{"rendered":"<p>Today we are going to take a look at \u201cmarquee\u201d once again. We actually have covered about it in our previous post which talked about using the -webkit-marquee property, but this time we will take this subject a little further. In this post, we are going to create a marquee-like effect using the CSS3 Animation.&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1096,507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Advanced Marquee Effect with CSS3 Animation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Today we are going to take a look at &quot;marquee&quot; once again. We actually have covered about it in our previous post which talked about using the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Advanced Marquee Effect with CSS3 Animation\" \/>\n<meta property=\"og:description\" content=\"Today we are going to take a look at &quot;marquee&quot; once again. We actually have covered about it in our previous post which talked about using the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-29T15:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:10:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Advanced Marquee Effect with CSS3 Animation\",\"datePublished\":\"2012-06-29T15:01:00+00:00\",\"dateModified\":\"2025-04-03T17:10:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/\"},\"wordCount\":1078,\"commentCount\":49,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-css3-animation\\\/\\\/advanced-marquee-storyboard.jpg\",\"keywords\":[\"Animation UI\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/\",\"name\":\"How to Advanced Marquee Effect with CSS3 Animation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-css3-animation\\\/\\\/advanced-marquee-storyboard.jpg\",\"datePublished\":\"2012-06-29T15:01:00+00:00\",\"dateModified\":\"2025-04-03T17:10:10+00:00\",\"description\":\"Today we are going to take a look at \\\"marquee\\\" once again. We actually have covered about it in our previous post which talked about using the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-css3-animation\\\/\\\/advanced-marquee-storyboard.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-css3-animation\\\/\\\/advanced-marquee-storyboard.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-advanced-marquee\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Advanced Marquee Effect with CSS3 Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Advanced Marquee Effect with CSS3 Animation - Hongkiat","description":"Today we are going to take a look at \"marquee\" once again. We actually have covered about it in our previous post which talked about using the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/","og_locale":"en_US","og_type":"article","og_title":"How to Advanced Marquee Effect with CSS3 Animation","og_description":"Today we are going to take a look at \"marquee\" once again. We actually have covered about it in our previous post which talked about using the","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-29T15:01:00+00:00","article_modified_time":"2025-04-03T17:10:10+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Advanced Marquee Effect with CSS3 Animation","datePublished":"2012-06-29T15:01:00+00:00","dateModified":"2025-04-03T17:10:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/"},"wordCount":1078,"commentCount":49,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg","keywords":["Animation UI","CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/","name":"How to Advanced Marquee Effect with CSS3 Animation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg","datePublished":"2012-06-29T15:01:00+00:00","dateModified":"2025-04-03T17:10:10+00:00","description":"Today we are going to take a look at \"marquee\" once again. We actually have covered about it in our previous post which talked about using the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-css3-animation\/\/advanced-marquee-storyboard.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Advanced Marquee Effect with CSS3 Animation"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3FD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14113"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14113\/revisions"}],"predecessor-version":[{"id":73529,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14113\/revisions\/73529"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14113"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}