{"id":56572,"date":"2022-08-07T03:01:27","date_gmt":"2022-08-06T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56572"},"modified":"2022-08-07T09:14:39","modified_gmt":"2022-08-06T23:14:39","slug":"css-grid-column-animation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-animation-tutorial\/","title":{"rendered":"CSS Grid Column Animation Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Grid Column Animation Tutorial<\/p><\/div>\n

CSS @keyframes rule<\/a> animations can add “pizazz” to your webpages. And, because yesterday’s CSS Grid Column Primer Tutorial<\/a>‘s web application<\/a>‘s actions could take place in the blink of an eye before registering “what just happened” for the user, we offer optional “pizazz” as of today. It’s amazing what CSS properties you can animate, and you can do more than one property at a time doing it! Using a second property can help clarify an explanation, as we think we are improving with the animation related Javascript function logic<\/font> below …<\/p>\n


\nfunction myFunction() {
\n if (document.getElementById('cbanima').checked) {
\n mmcnt++;
\n if (('' + document.getElementById(\"myDIV\" + one).style.gridColumn) == '') {
\n document.getElementById('anima').innerHTML+='<style> #' + \"myDIV\" + one + ' { animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + was[eval('' + one)] + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } <\/style>';
\n } else {
\n document.getElementById('anima').innerHTML+='<style> #' + \"myDIV\" + one + ' { animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + ('' + document.getElementById(\"myDIV\" + one).style.gridColumn) + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } <\/style>';
\n }
\n setTimeout(postonl, 2200);
\n } else {<\/font>
\n document.getElementById(\"myDIV\" + one).style.gridColumn = rto;
\n if (document.getElementById(\"mysel\").innerHTML == '') {
\n document.getElementById(\"mysel\").innerHTML+='<option value=\"\">Please review and\/or replay movements<\/option>';
\n }
\n document.getElementById(\"mysel\").innerHTML+='<option value=\"' + one + ':' + rto + '\">' + document.getElementById(\"mybut\").innerHTML + '<\/option>';
\n onl();
\n }<\/font>
\n}
\n<\/code><\/p>\n

… applying “on the fly” dynamic CSS styling to our changed<\/a> div_grid_rearrange.html<\/a> “proof of concept” CSS grid-column<\/a> tester below<\/a>.<\/p>\n

\n

\n

Previous relevant CSS Grid Column Primer Tutorial<\/a> is shown below.<\/p>\n

\"CSS<\/a>

CSS Grid Column Primer Tutorial<\/p><\/div>\n

Continuing on with the theme of “HTML div element looking like an HTML table element” regarding a “grid look”, onto yesterday’s CSS Row Gap Primer Tutorial<\/a> start, today we turn our attention to the CSS “grid-column” property<\/a> …<\/p>\n

\nThe grid-column property specifies a grid item’s size and location in a grid layout, and is a shorthand property for the following properties:
\n
\ngrid-column-start
\ngrid-column-end\n<\/p><\/blockquote>\n

Why the interest? Well, we’d reference yesterday’s tutorial<\/a> here …<\/p>\n

\n

And yes, HTML div is more favoured than HTML table regarding responsive design<\/a>.<\/p>\n<\/blockquote>\n

… as an “interest point”, at least for us. In “table talk” these are a bit like “colspan” and “rowspan”<\/a>.<\/p>\n

In assembling today’s “proof of concept” css_row_gap_usage.html<\/a> HTML\/CSS parts of the design, we add a little Javascript to with the web application<\/a> we thank as a major code source of inspiration<\/a>, thanks.<\/p>\n

Want to see what we mean?<\/p>\n