HOME | DD

imnotsana — PE: CSS3 101 - Transition Animations
Published: 2013-06-01 04:19:06 +0000 UTC; Views: 14049; Favourites: 102; Downloads: 0
Redirect to original
Description body div#devskin10068498 div.drag-and-collect, body div#devskin10068498 .drag-and-collect { display:none!important; background:none!important; } body div#devskin10068498 .fig7 .tr .shadow-holder, body div#devskin10068498 .fig7 .tr .shadow, body div#devskin10068498 .fig7 .tr .wrap, body div#devskin10068498 .fig7 .tr .lit, body div#devskin10068498 .fig7 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig7 .tr .lit > i, body div#devskin10068498 .fig7 .tr .lit > img, body div#devskin10068498 .fig7 .tr .lit q * { display:none; } body div#devskin10068498 .fig7 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig7 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .fig7 .tr, body div#devskin10068498 .fig7 .tr .lit q::before { width:200px; height:200px; } body div#devskin10068498 .fig7 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .fig7 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:cyan url('https://th00.deviantart.net/fs71/200H/i/2013/146/9/2/propose_a_toast__by_im_not_sana-d66maae.png') no-repeat center center; background-size:50%; } body div#devskin10068498 .fig7 .tr q[style*='-1px']::before { background-size:50.39%; background-color:#00DAFF; } body div#devskin10068498 .fig7 .tr q[style*='-2px']::before { background-size:50.98%; background-color:#00B7FF; } body div#devskin10068498 .fig7 .tr q[style*='-3px']::before { background-size:51.80%; background-color:#0098FF; } body div#devskin10068498 .fig7 .tr q[style*='-4px']::before { background-size:52.85%; background-color:#007AFF; } body div#devskin10068498 .fig7 .tr q[style*='-5px']::before { background-size:54.17%; background-color:#0060FF; } body div#devskin10068498 .fig7 .tr q[style*='-6px']::before { background-size:55.50%; background-color:#0045FF; } body div#devskin10068498 .fig7 .tr q[style*='-7px']::before { background-size:57.31%; background-color:#0031FF; } body div#devskin10068498 .fig7 .tr q[style*='-8px']::before { background-size:58.78%; background-color:#001FFF; } body div#devskin10068498 .fig7 .tr q[style*='-9px']::before { background-size:60.62%; background-color:#0011FF; } body div#devskin10068498 .fig7 .tr q[style*='-10px']::before { background-size:62.20%; background-color:#0007FF; } body div#devskin10068498 .fig7 .tr q[style*='-11px']::before { background-size:63.77%; background-color:#0002FF; } body div#devskin10068498 .fig7 .tr q[style*='-12px']::before { background-size:65.52%; background-color:#0000FF; } body div#devskin10068498 .fig7 .tr q[style*='-13px']::before { background-size:66.76%; background-color:#0003FF; } body div#devskin10068498 .fig7 .tr q[style*='-14px']::before { background-size:68.16%; background-color:#000AFF; } body div#devskin10068498 .fig7 .tr q[style*='-15px']::before { background-size:69.29%; background-color:#0014FF; } body div#devskin10068498 .fig7 .tr q[style*='-16px']::before { background-size:70.56%; background-color:#0026FF; } body div#devskin10068498 .fig7 .tr q[style*='-17px']::before { background-size:71.56%; background-color:#0036FF; } body div#devskin10068498 .fig7 .tr q[style*='-18px']::before { background-size:72.50%; background-color:#0050FF; } body div#devskin10068498 .fig7 .tr q[style*='-19px']::before { background-size:73.38%; background-color:#0067FF; } body div#devskin10068498 .fig7 .tr q[style*='-20px']::before { background-size:74.06%; background-color:#0080FF; } body div#devskin10068498 .fig7 .tr q[style*='-21px']::before { background-size:74.83%; background-color:#0098FF; } body div#devskin10068498 .fig7 .tr q[style*='-22px']::before { background-size:75.42%; background-color:#00AFFF; } body div#devskin10068498 .fig7 .tr q[style*='-23px']::before { background-size:76.07%; background-color:#00C9FF; } body div#devskin10068498 .fig7 .tr q[style*='-24px']::before { background-size:76.57%; background-color:#00DBFF; } body div#devskin10068498 .fig7 .tr q[style*='-25px']::before { background-size:77.03%; background-color:#00E9FF; } body div#devskin10068498 .fig7 .tr q[style*='-26px']::before { background-size:77.46%; background-color:#00F6FF; } body div#devskin10068498 .fig7 .tr q[style*='-27px']::before { background-size:77.85%; background-color:#00FCFF; } body div#devskin10068498 .fig7 .tr q[style*='-28px']::before { background-size:78.25%; background-color:#00FFFF; } body div#devskin10068498 .fig7 .tr q[style*='-29px']::before { background-size:78.52%; background-color:#00FDFF; } body div#devskin10068498 .fig7 .tr q[style*='-30px']::before { background-size:78.83%; background-color:#00F8FF; } body div#devskin10068498 .fig7 .tr q[style*='-31px']::before { background-size:79.05%; background-color:#00ECFF; } body div#devskin10068498 .fig7 .tr q[style*='-32px']::before { background-size:79.29%; background-color:#00E1FF; } body div#devskin10068498 .fig7 .tr q[style*='-33px']::before { background-size:79.45%; background-color:#00CDFF; } body div#devskin10068498 .fig7 .tr q[style*='-34px']::before { background-size:79.62%; background-color:#00BBFF; } body div#devskin10068498 .fig7 .tr q[style*='-35px']::before { background-size:79.73%; background-color:#00A0FF; } body div#devskin10068498 .fig7 .tr q[style*='-36px']::before { background-size:79.83%; background-color:#0087FF; } body div#devskin10068498 .fig7 .tr q[style*='-37px']::before { background-size:79.90%; background-color:#0067FF; } body div#devskin10068498 .fig7 .tr q[style*='-38px']::before { background-size:79.96%; background-color:#0048FF; } body div#devskin10068498 .fig7 .tr q[style*='-39px']::before { background-size:79.99%; background-color:#0029FF; } body div#devskin10068498 .fig7 .tr q[style*='-40px']::before { background-size:80.00%; background-color:#0000FF; } body div#devskin10068498 .fig5, body div#devskin10068498 .fig1, body div#devskin10068498 .fig2 { width:200px; background:rgb(0, 0, 0); background:rgba(0,0,0,0.6); vertical-align:middle; } body div#devskin10068498 .fig6 .tr .shadow-holder, body div#devskin10068498 .fig6 .tr .shadow, body div#devskin10068498 .fig6 .tr .wrap, body div#devskin10068498 .fig6 .tr .lit, body div#devskin10068498 .fig6 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig6 .tr .lit > i, body div#devskin10068498 .fig6 .tr .lit > img, body div#devskin10068498 .fig6 .tr .lit q * { display:none; } body div#devskin10068498 .fig6 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig6 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .fig6 .tr, body div#devskin10068498 .fig6 .tr .lit q::before { width:300px; height:300px; } body div#devskin10068498 .fig6 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .fig6 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url('https://th08.deviantart.net/fs70/200H/i/2011/328/2/d/ich_liebe_dich__by_im_not_sana-d378ws3.jpg') no-repeat center center; background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-1px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-2px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-3px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-4px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-5px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-6px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-7px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-8px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-9px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-10px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-11px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-12px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-13px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-14px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-15px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-16px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-17px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-18px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-19px']::before { background-size:70.34%; } body div#devskin10068498 .fig6 .tr q[style*='-20px']::before { background-size:72.10%; } body div#devskin10068498 .fig6 .tr q[style*='-21px']::before { background-size:74.38%; } body div#devskin10068498 .fig6 .tr q[style*='-22px']::before { background-size:76.36%; } body div#devskin10068498 .fig6 .tr q[style*='-23px']::before { background-size:78.45%; } body div#devskin10068498 .fig6 .tr q[style*='-24px']::before { background-size:80.28%; } body div#devskin10068498 .fig6 .tr q[style*='-25px']::before { background-size:82.06%; } body div#devskin10068498 .fig6 .tr q[style*='-26px']::before { background-size:84.77%; } body div#devskin10068498 .fig6 .tr q[style*='-27px']::before { background-size:86.41%; } body div#devskin10068498 .fig6 .tr q[style*='-28px']::before { background-size:88.08%; } body div#devskin10068498 .fig6 .tr q[style*='-29px']::before { background-size:90.53%; } body div#devskin10068498 .fig6 .tr q[style*='-30px']::before { background-size:92.06%; } body div#devskin10068498 .fig6 .tr q[style*='-31px']::before { background-size:94.41%; } body div#devskin10068498 .fig6 .tr q[style*='-32px']::before { background-size:96.81%; } body div#devskin10068498 .fig6 .tr q[style*='-33px']::before { background-size:97.08%; } body div#devskin10068498 .fig6 .tr q[style*='-34px']::before { background-size:98.36%; } body div#devskin10068498 .fig6 .tr q[style*='-35px']::before { background-size:99.55%; } body div#devskin10068498 .fig6 .tr q[style*='-36px']::before { background-size:99.71%; } body div#devskin10068498 .fig6 .tr q[style*='-37px']::before { background-size:99.84%; } body div#devskin10068498 .fig6 .tr q[style*='-38px']::before { background-size:99.94%; } body div#devskin10068498 .fig6 .tr q[style*='-39px']::before { background-size:99.98%; } body div#devskin10068498 .fig6 .tr q[style*='-40px']::before { background-size:100.00%; } body div#devskin10068498 .fig5 .tr .shadow-holder, body div#devskin10068498 .fig5 .tr .shadow, body div#devskin10068498 .fig5 .tr .wrap, body div#devskin10068498 .fig5 .tr .lit, body div#devskin10068498 .fig5 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig5 .tr .lit > i, body div#devskin10068498 .fig5 .tr .lit > img, body div#devskin10068498 .fig5 .tr .lit q * { display:none; } body div#devskin10068498 .fig5 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig5 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:27px; } body div#devskin10068498 .fig5 .tr, body div#devskin10068498 .fig5 .tr .lit q::before { width:110px; height:100px; } body div#devskin10068498 .fig5 .tr { display:inline-block; position:relative; visibility:hidden; overflow:hidden; } body div#devskin10068498 .fig5 .tr .lit q::before { content:'Menu' ' ' ' ' 'Facebook Twitter deviantART'; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-size:20px; font-family:'Voltaire'; line-height:20px; overflow:hidden; border-top-right-radius:3px; -moz-border-top-right-radius:3px; -webkit-border-top-right-radius:3px; border-top-left-radius:3px; -moz-border-top-left-radius:3px; -webkit-border-top-left-radius:3px; border-bottom:2px solid black; height:50px; text-align:center; background:gray; height:20px; } body div#devskin10068498 .fig5 .tr q[style*='-1px']::before { height:20px; } body div#devskin10068498 .fig5 .tr q[style*='-2px']::before { height:21px; } body div#devskin10068498 .fig5 .tr q[style*='-3px']::before { height:21px; } body div#devskin10068498 .fig5 .tr q[style*='-4px']::before { height:22px; } body div#devskin10068498 .fig5 .tr q[style*='-5px']::before { height:24px; } body div#devskin10068498 .fig5 .tr q[style*='-6px']::before { height:25px; } body div#devskin10068498 .fig5 .tr q[style*='-7px']::before { height:27px; } body div#devskin10068498 .fig5 .tr q[style*='-8px']::before { height:29px; } body div#devskin10068498 .fig5 .tr q[style*='-9px']::before { height:31px; } body div#devskin10068498 .fig5 .tr q[style*='-10px']::before { height:33px; } body div#devskin10068498 .fig5 .tr q[style*='-11px']::before { height:36px; } body div#devskin10068498 .fig5 .tr q[style*='-12px']::before { height:38px; } body div#devskin10068498 .fig5 .tr q[style*='-13px']::before { height:41px; } body div#devskin10068498 .fig5 .tr q[style*='-14px']::before { height:43px; } body div#devskin10068498 .fig5 .tr q[style*='-15px']::before { height:47px; } body div#devskin10068498 .fig5 .tr q[style*='-16px']::before { height:49px; } body div#devskin10068498 .fig5 .tr q[style*='-17px']::before { height:53px; } body div#devskin10068498 .fig5 .tr q[style*='-18px']::before { height:56px; } body div#devskin10068498 .fig5 .tr q[style*='-19px']::before { height:59px; } body div#devskin10068498 .fig5 .tr q[style*='-20px']::before { height:63px; } body div#devskin10068498 .fig5 .tr q[style*='-21px']::before { height:66px; } body div#devskin10068498 .fig5 .tr q[style*='-22px']::before { height:70px; } body div#devskin10068498 .fig5 .tr q[style*='-23px']::before { height:74px; } body div#devskin10068498 .fig5 .tr q[style*='-24px']::before { height:78px; } body div#devskin10068498 .fig5 .tr q[style*='-25px']::before { height:81px; } body div#devskin10068498 .fig5 .tr q[style*='-26px']::before { height:85px; } body div#devskin10068498 .fig5 .tr q[style*='-27px']::before { height:90px; } body div#devskin10068498 .fig1 .tr .shadow-holder, body div#devskin10068498 .fig1 .tr .shadow, body div#devskin10068498 .fig1 .tr .wrap, body div#devskin10068498 .fig1 .tr .lit, body div#devskin10068498 .fig1 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .fig1 .tr .lit > i, body div#devskin10068498 .fig1 .tr .lit > img, body div#devskin10068498 .fig1 .tr .lit q * { display:none; } body div#devskin10068498 .fig1 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .fig1 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:27px; } body div#devskin10068498 .fig1 .tr, body div#devskin10068498 .fig1 .tr .lit q::before { width:150px; height:50px; } body div#devskin10068498 .fig1 .tr { display:inline-block; position:relative; visibility:hidden; overflow:hidden; } body div#devskin10068498 .fig1 .tr .lit q::before { content:url(https://fc01.deviantart.net/fs70/f/2010/179/3/f/Sword_Tard_by_jahw.gif); display:block; position:absolute; left:0; top:0; text-indent:0; color:black; height:50px; padding-left:0px; } body div#devskin10068498 .fig1 .tr q[style*='-1px']::before { padding-left:1px; } body div#devskin10068498 .fig1 .tr q[style*='-2px']::before { padding-left:3px; } body div#devskin10068498 .fig1 .tr q[style*='-3px']::before { padding-left:6px; } body div#devskin10068498 .fig1 .tr q[style*='-4px']::before { padding-left:9px; } body div#devskin10068498 .fig1 .tr q[style*='-5px']::before { padding-left:13px; } body div#devskin10068498 .fig1 .tr q[style*='-6px']::before { padding-left:18px; } body div#devskin10068498 .fig1 .tr q[style*='-7px']::before { padding-left:21px; } body div#devskin10068498 .fig1 .tr q[style*='-8px']::before { padding-left:25px; } body div#devskin10068498 .fig1 .tr q[style*='-9px']::before { padding-left:29px; } body div#devskin10068498 .fig1 .tr q[style*='-10px']::before { padding-left:32px; } body div#devskin10068498 .fig1 .tr q[style*='-11px']::before { padding-left:35px; } body div#devskin10068498 .fig1 .tr q[style*='-12px']::before { padding-left:37px; } body div#devskin10068498 .fig1 .tr q[style*='-13px']::before { padding-left:39px; } body div#devskin10068498 .fig1 .tr q[style*='-14px']::before { padding-left:41px; } body div#devskin10068498 .fig1 .tr q[style*='-15px']::before { padding-left:43px; } body div#devskin10068498 .fig1 .tr q[style*='-16px']::before { padding-left:44px; } body div#devskin10068498 .fig1 .tr q[style*='-17px']::before { padding-left:45px; } body div#devskin10068498 .fig1 .tr q[style*='-18px']::before { padding-left:46px; } body div#devskin10068498 .fig1 .tr q[style*='-19px']::before { padding-left:47px; } body div#devskin10068498 .fig1 .tr q[style*='-20px']::before { padding-left:48px; } body div#devskin10068498 .fig1 .tr q[style*='-21px']::before { padding-left:48px; } body div#devskin10068498 .fig1 .tr q[style*='-22px']::before { padding-left:49px; } body div#devskin10068498 .fig1 .tr q[style*='-23px']::before { padding-left:49px; } body div#devskin10068498 .fig1 .tr q[style*='-24px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-25px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-26px']::before { padding-left:50px; } body div#devskin10068498 .fig1 .tr q[style*='-27px']::before { padding-left:50px; } body div#devskin10068498 .stamp { width:100%; text-align:center; } body div#devskin10068498 .stamp .tr .shadow-holder, body div#devskin10068498 .stamp .tr .shadow, body div#devskin10068498 .stamp .tr .wrap, body div#devskin10068498 .stamp .tr .lit, body div#devskin10068498 .stamp .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .stamp .tr .lit > i, body div#devskin10068498 .stamp .tr .lit > img, body div#devskin10068498 .stamp .tr .lit q * { display:none; } body div#devskin10068498 .stamp .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .stamp .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:40px; } body div#devskin10068498 .stamp .tr, body div#devskin10068498 .stamp .tr .lit q::before { width:178px; height:250px; } body div#devskin10068498 .stamp .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .stamp .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url('https://2.bp.blogspot.com/-eZSxYTh0D_E/UQbnl2C41mI/AAAAAAAAieg/fTLhj6CN9EM/s1600/CSS3-video-tutorials.png') no-repeat center center; text-align:center; background-size:50%; } body div#devskin10068498 .stamp .tr q[style*='-1px']::before { background-size:50%; } body div#devskin10068498 .stamp .tr q[style*='-2px']::before { background-size:52%; } body div#devskin10068498 .stamp .tr q[style*='-3px']::before { background-size:54%; } body div#devskin10068498 .stamp .tr q[style*='-4px']::before { background-size:56%; } body div#devskin10068498 .stamp .tr q[style*='-5px']::before { background-size:58%; } body div#devskin10068498 .stamp .tr q[style*='-6px']::before { background-size:60%; } body div#devskin10068498 .stamp .tr q[style*='-7px']::before { background-size:62%; } body div#devskin10068498 .stamp .tr q[style*='-8px']::before { background-size:64%; } body div#devskin10068498 .stamp .tr q[style*='-9px']::before { background-size:66%; } body div#devskin10068498 .stamp .tr q[style*='-10px']::before { background-size:68%; } body div#devskin10068498 .stamp .tr q[style*='-11px']::before { background-size:70%; } body div#devskin10068498 .stamp .tr q[style*='-12px']::before { background-size:72%; } body div#devskin10068498 .stamp .tr q[style*='-13px']::before { background-size:74%; } body div#devskin10068498 .stamp .tr q[style*='-14px']::before { background-size:76%; } body div#devskin10068498 .stamp .tr q[style*='-15px']::before { background-size:78%; } body div#devskin10068498 .stamp .tr q[style*='-16px']::before { background-size:80%; } body div#devskin10068498 .stamp .tr q[style*='-17px']::before { background-size:82%; } body div#devskin10068498 .stamp .tr q[style*='-18px']::before { background-size:84%; } body div#devskin10068498 .stamp .tr q[style*='-19px']::before { background-size:86%; } body div#devskin10068498 .stamp .tr q[style*='-20px']::before { background-size:88%; } body div#devskin10068498 .stamp .tr q[style*='-21px']::before { background-size:90%; } body div#devskin10068498 .stamp .tr q[style*='-22px']::before { background-size:92%; } body div#devskin10068498 .stamp .tr q[style*='-23px']::before { background-size:94%; } body div#devskin10068498 .stamp .tr q[style*='-24px']::before { background-size:96%; } body div#devskin10068498 .stamp .tr q[style*='-25px']::before { background-size:98%; } body div#devskin10068498 .stamp .tr q[style*='-26px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-27px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-28px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-29px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-30px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-31px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-32px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-33px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-34px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-35px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-36px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-37px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-38px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-39px']::before { background-size:100%; } body div#devskin10068498 .stamp .tr q[style*='-40px']::before { background-size:100%; } body div#devskin10068498 .title { width:100%; text-align:center; } body div#devskin10068498 .title .tr .shadow-holder, body div#devskin10068498 .title .tr .shadow, body div#devskin10068498 .title .tr .wrap, body div#devskin10068498 .title .tr .lit, body div#devskin10068498 .title .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .title .tr .lit > i, body div#devskin10068498 .title .tr .lit > img, body div#devskin10068498 .title .tr .lit q * { display:none; } body div#devskin10068498 .title .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .title .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:80px; } body div#devskin10068498 .title .tr, body div#devskin10068498 .title .tr .lit q::before { width:400px; } body div#devskin10068498 .title .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .title .tr .lit q::before { content:'CSS3 101 - Conclusion'; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-family:Trebuchet; text-shadow:#fff 0px 1px 0px; font-weight:bold; font-size:30px; background:none; color:#B73E62; text-align:center; } body div#devskin10068498 .title .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10068498 .title .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10068498 .title .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10068498 .title .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10068498 .title .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10068498 .title .tr q[style*='-6px']::before { color:#986700; } body div#devskin10068498 .title .tr q[style*='-7px']::before { color:#897600; } body div#devskin10068498 .title .tr q[style*='-8px']::before { color:#798600; } body div#devskin10068498 .title .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10068498 .title .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10068498 .title .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10068498 .title .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10068498 .title .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10068498 .title .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10068498 .title .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10068498 .title .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10068498 .title .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10068498 .title .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10068498 .title .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10068498 .title .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10068498 .title .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10068498 .title .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10068498 .title .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10068498 .title .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10068498 .title .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10068498 .title .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10068498 .title .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10068498 .title .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10068498 .title .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10068498 .title .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10068498 .title .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10068498 .title .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10068498 .title .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10068498 .title .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10068498 .title .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10068498 .title .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10068498 .title .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10068498 .title .tr q[style*='-38px']::before { color:#679800; } body div#devskin10068498 .title .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10068498 .title .tr q[style*='-40px']::before { color:#808000; } body div#devskin10068498 .title .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10068498 .title .tr q[style*='-42px']::before { color:#986700; } body div#devskin10068498 .title .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10068498 .title .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10068498 .title .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10068498 .title .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10068498 .title .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10068498 .title .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10068498 .title .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10068498 .title .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10068498 .title .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10068498 .title .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10068498 .title .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10068498 .title .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10068498 .title .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10068498 .title .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10068498 .title .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10068498 .title .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10068498 .title .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10068498 .title .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10068498 .title .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10068498 .title .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10068498 .title .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10068498 .title .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10068498 .title .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10068498 .title .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10068498 .title .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10068498 .title .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10068498 .title .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10068498 .title .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10068498 .title .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10068498 .title .tr q[style*='-72px']::before { color:#877800; } body div#devskin10068498 .title .tr q[style*='-73px']::before { color:#798600; } body div#devskin10068498 .title .tr q[style*='-74px']::before { color:#699600; } body div#devskin10068498 .title .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10068498 .title .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10068498 .title .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10068498 .title .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10068498 .title .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10068498 .title .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10068498 .tr .shadow-holder, body div#devskin10068498 .tr .shadow, body div#devskin10068498 .tr .wrap, body div#devskin10068498 .tr .lit, body div#devskin10068498 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin10068498 .tr .lit > i, body div#devskin10068498 .tr .lit > img, body div#devskin10068498 .tr .lit q * { display:none; } body div#devskin10068498 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin10068498 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:100px; } body div#devskin10068498 .tr, body div#devskin10068498 .tr .lit q::before { width:400px; } body div#devskin10068498 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin10068498 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; font-family:Trebuchet; text-shadow:#fff 0px 1px 0px; font-weight:bold; font-size:28px; background:none; color:#B73E62; text-align:center; line-height:28px; } body div#devskin10068498 .tr q[style*='-1px']::before { color:#EC1300; } body div#devskin10068498 .tr q[style*='-2px']::before { color:#DA2500; } body div#devskin10068498 .tr q[style*='-3px']::before { color:#C83700; } body div#devskin10068498 .tr q[style*='-4px']::before { color:#B74800; } body div#devskin10068498 .tr q[style*='-5px']::before { color:#A75800; } body div#devskin10068498 .tr q[style*='-6px']::before { color:#986700; } body div#devskin10068498 .tr q[style*='-7px']::before { color:#897600; } body div#devskin10068498 .tr q[style*='-8px']::before { color:#798600; } body div#devskin10068498 .tr q[style*='-9px']::before { color:#6B9400; } body div#devskin10068498 .tr q[style*='-10px']::before { color:#5EA100; } body div#devskin10068498 .tr q[style*='-11px']::before { color:#51AE00; } body div#devskin10068498 .tr q[style*='-12px']::before { color:#45BA00; } body div#devskin10068498 .tr q[style*='-13px']::before { color:#3BC400; } body div#devskin10068498 .tr q[style*='-14px']::before { color:#31CE00; } body div#devskin10068498 .tr q[style*='-15px']::before { color:#27D800; } body div#devskin10068498 .tr q[style*='-16px']::before { color:#1FE000; } body div#devskin10068498 .tr q[style*='-17px']::before { color:#18E700; } body div#devskin10068498 .tr q[style*='-18px']::before { color:#11EE00; } body div#devskin10068498 .tr q[style*='-19px']::before { color:#0CF300; } body div#devskin10068498 .tr q[style*='-20px']::before { color:#07F800; } body div#devskin10068498 .tr q[style*='-21px']::before { color:#04FB00; } body div#devskin10068498 .tr q[style*='-22px']::before { color:#02FD00; } body div#devskin10068498 .tr q[style*='-23px']::before { color:#00FF00; } body div#devskin10068498 .tr q[style*='-24px']::before { color:#00FF00; } body div#devskin10068498 .tr q[style*='-25px']::before { color:#01FE00; } body div#devskin10068498 .tr q[style*='-26px']::before { color:#03FC00; } body div#devskin10068498 .tr q[style*='-27px']::before { color:#06F900; } body div#devskin10068498 .tr q[style*='-28px']::before { color:#0AF500; } body div#devskin10068498 .tr q[style*='-29px']::before { color:#0FF000; } body div#devskin10068498 .tr q[style*='-30px']::before { color:#16E900; } body div#devskin10068498 .tr q[style*='-31px']::before { color:#1DE200; } body div#devskin10068498 .tr q[style*='-32px']::before { color:#24DB00; } body div#devskin10068498 .tr q[style*='-33px']::before { color:#2DD200; } body div#devskin10068498 .tr q[style*='-34px']::before { color:#38C700; } body div#devskin10068498 .tr q[style*='-35px']::before { color:#42BD00; } body div#devskin10068498 .tr q[style*='-36px']::before { color:#4DB200; } body div#devskin10068498 .tr q[style*='-37px']::before { color:#5BA400; } body div#devskin10068498 .tr q[style*='-38px']::before { color:#679800; } body div#devskin10068498 .tr q[style*='-39px']::before { color:#738C00; } body div#devskin10068498 .tr q[style*='-40px']::before { color:#808000; } body div#devskin10068498 .tr q[style*='-41px']::before { color:#8C7300; } body div#devskin10068498 .tr q[style*='-42px']::before { color:#986700; } body div#devskin10068498 .tr q[style*='-43px']::before { color:#A45B00; } body div#devskin10068498 .tr q[style*='-44px']::before { color:#B24D00; } body div#devskin10068498 .tr q[style*='-45px']::before { color:#BD4200; } body div#devskin10068498 .tr q[style*='-46px']::before { color:#C73800; } body div#devskin10068498 .tr q[style*='-47px']::before { color:#D02F00; } body div#devskin10068498 .tr q[style*='-48px']::before { color:#DB2400; } body div#devskin10068498 .tr q[style*='-49px']::before { color:#E21D00; } body div#devskin10068498 .tr q[style*='-50px']::before { color:#E91600; } body div#devskin10068498 .tr q[style*='-51px']::before { color:#F00F00; } body div#devskin10068498 .tr q[style*='-52px']::before { color:#F50A00; } body div#devskin10068498 .tr q[style*='-53px']::before { color:#F90600; } body div#devskin10068498 .tr q[style*='-54px']::before { color:#FC0300; } body div#devskin10068498 .tr q[style*='-55px']::before { color:#FE0100; } body div#devskin10068498 .tr q[style*='-56px']::before { color:#FF0000; } body div#devskin10068498 .tr q[style*='-57px']::before { color:#FF0000; } body div#devskin10068498 .tr q[style*='-58px']::before { color:#FD0200; } body div#devskin10068498 .tr q[style*='-59px']::before { color:#FB0400; } body div#devskin10068498 .tr q[style*='-60px']::before { color:#F80700; } body div#devskin10068498 .tr q[style*='-61px']::before { color:#F30C00; } body div#devskin10068498 .tr q[style*='-62px']::before { color:#ED1200; } body div#devskin10068498 .tr q[style*='-63px']::before { color:#E71800; } body div#devskin10068498 .tr q[style*='-64px']::before { color:#E01F00; } body div#devskin10068498 .tr q[style*='-65px']::before { color:#D72800; } body div#devskin10068498 .tr q[style*='-66px']::before { color:#CE3100; } body div#devskin10068498 .tr q[style*='-67px']::before { color:#C43B00; } body div#devskin10068498 .tr q[style*='-68px']::before { color:#BB4400; } body div#devskin10068498 .tr q[style*='-69px']::before { color:#AE5100; } body div#devskin10068498 .tr q[style*='-70px']::before { color:#A25D00; } body div#devskin10068498 .tr q[style*='-71px']::before { color:#946B00; } body div#devskin10068498 .tr q[style*='-72px']::before { color:#877800; } body div#devskin10068498 .tr q[style*='-73px']::before { color:#798600; } body div#devskin10068498 .tr q[style*='-74px']::before { color:#699600; } body div#devskin10068498 .tr q[style*='-75px']::before { color:#58A700; } body div#devskin10068498 .tr q[style*='-76px']::before { color:#48B700; } body div#devskin10068498 .tr q[style*='-77px']::before { color:#37C800; } body div#devskin10068498 .tr q[style*='-78px']::before { color:#26D900; } body div#devskin10068498 .tr q[style*='-79px']::before { color:#12ED00; } body div#devskin10068498 .tr q[style*='-80px']::before { color:#00FF00; } body div#devskin10068498 .h1 .tr .lit q::before { content:'CSS3 101 - Transition'; } body div#devskin10068498 .h1 { width:100%; text-align:center; } body div#devskin10068498 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin10068498 .gr-top { display:none; } body div#devskin10068498 .gr-top .gr { display:none; } body div#devskin10068498 .gr-top h2 img { display:none; } body div#devskin10068498 .gr-top h2 { display:none; } body div#devskin10068498 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin10068498 .gr { background:transparent; border:none; } body div#devskin10068498 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin10068498 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin10068498 i.tri { display:none; } body div#devskin10068498 i.gr1 { display:none; } body div#devskin10068498 i.gr2 { display:none; } body div#devskin10068498 i.gr3 { display:none; } body div#devskin10068498 i.gb { display:none; } body div#devskin10068498 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin10068498 .top img { margin:0px auto; min-width:529px; } body div#devskin10068498 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin10068498 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin10068498 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin10068498 span.board { display:none; } body div#devskin10068498 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin10068498 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin10068498 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin10068498 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin10068498 a { color:#B73E62; text-decoration:none; } body div#devskin10068498 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin10068498 ul { margin:0px 0px 0px 0px; } body div#devskin10068498 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif'); margin:0; padding:0; line-height:0px; } body div#devskin10068498 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin10068498 li b sup { font-size:10px; font-weight:normal; } body div#devskin10068498 .list { display:none!important; } body div#devskin10068498 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10068498 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin10068498 .clear_ { clear:both!important; } body div#devskin10068498 .clear { clear:both!important; } body div#devskin10068498 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin10068498 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin10068498 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10068498 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin10068498 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin10068498 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin10068498 .links img { padding-left:8px; } body div#devskin10068498 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin10068498 .buttons img { padding-right:8px; } body div#devskin10068498 h1 { font-size:28px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 hr { height:0; border:0; border-top:2px solid #B73E62; border-bottom:1px solid white; } body div#devskin10068498 .text h2 { font-size:24px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h3 { font-size:16px; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h3 a { font-size:16px; color:#B73E62; text-shadow:#fff 0px 1px 0px; } body div#devskin10068498 h5 { font-size:20px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; line-height:0; } body div#devskin10068498 p { text-align:justify; } body div#devskin10068498 blockquote { font-family:Monospace; margin:0 auto; padding:10px; max-width:500px; background:rgb(183, 62, 98); background:rgba(183, 62, 98, 0.5); color:white; border:1px solid #B73E62; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); text-align:left; } body div#devskin10068498 blockquote b { text-align:center; font-size:18px; font-family:Verdana, sans serif; } body div#devskin10068498 .toc { margin:0 auto; padding:10px; max-width:500px; background:rgb(183, 62, 98); background:rgba(183, 62, 98, 0.5); color:white; border:1px solid #B73E62; box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(255,255,255,0.5); text-align:left; } body div#devskin10068498 .toc h3, body div#devskin10068498 h3 a, body div#devskin10068498 h3 a:hover { text-align:left; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10068498 .toc a, body div#devskin10068498 a:hover { color:white; text-decoration:none; } body div#devskin10068498 .toc a:hover { text-shadow:0 0 5px white; } body div#devskin10068498 .toc h2 { text-align:center; color:white; text-shadow:#B73E62 0px 1px 0px; } body div#devskin10068498 h4 { line-height:0; text-align:center; color:rgb(183, 62, 98); color:rgba(183, 62, 98, 0.5); font-size:18px; font-family:Verdana, sans serif; } body div#devskin10068498 .box { float:left; width:20%; display:inline-block; text-align:center; vertical-align:middle; padding-right:10px; border:0; background:transparent; } body div#devskin10068498 abbr:hover { cursor:pointer; border-bottom:1px dashed gray; } body div#devskin10068498 em { color:#B73E62; } body div#devskin10068498 ins { font-family:Monospace; padding:2px; color:black; text-decoration:none; } body div#devskin10068498 code { padding:2px; background:rgb(255, 255, 255); background:rgba(255,255,255,0.5); color:black; font-style:normal!important; } body div#devskin10068498 img { vertical-align:middle; } body div#devskin10068498 .fig2 { width:100px; } body div#devskin10068498 .fig2 img { left:0; } body div#devskin10068498 .fig2 img:hover { padding-left:50px; }




Community Week





Table of Contents
This article has four main topics:


Legend:
- Works in dA for All Members
- Doesn't work in dA for Premium Members
- Works in dA for Alpha Testers at :devdevbug:



What is a Transition?
This time, I'll explain with an example. Let's take this awesome emote  by jahw .
When I see that emote, I'm imagining it saying "CHAAAARGE!" and running forward! So I want to make the emote do that, but instead of opening it up in Photoshop to animate (which I'm not allowed to do anyway since it's not my work), I'm just going to add a simple code that will do the animation for me! Hover over the emote below to see this magic in action!

Fig. 1 - Hover over the emote

Now on to the technical definition Basically transition allows the coder to change CSS properties smoothly from one value to another over a given duration. Whereas without CSS3, this is how the emote would change distance on hover:

Fig. 2 - Hover over the emote

As you can see the change looks very abrupt and unrealistic. But thanks to CSS3's transition property, we can make our webpages attractively interactive by animating CSS properties from its old state to the new state over a period time.

Now that's what I'm talking about!



Transition-property
This specifies the name of the CSS property to which the transition is applied. For the example in Fig. 1, the CSS property I used to change was the padding-left. I could also have used left or magin-left to achieve similar results.

Fig. 1 - transition-property: padding-left;

CSS
img{
padding-left: 0;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}

img:hover{
padding-left: 100px;
transition-property: padding-left;

/* Webkit Browsers */
-webkit-transition-property: padding-left;
 
/* Firefox */
-moz-transition-property: padding-left;

/* Opera */
-o-transition-property: padding-left;
}

Note: Adding just this will not give the smooth effect yet, go to the next section to know how.

Example of CSS properties that can be animated:
position of elements top bottom left right in length by px or percentage%
size of elements width or height in px or %
margins of element with either margin affecting all margins
or margin-top margin-bottom margin-left margin-right in px
padding of element with either padding affecting all padding
or padding-top padding-bottom padding-left padding-right in px
opacity of an element in a number
color value in #HEX or rgba() for text
font-size for text in px
text-shadow for text in shadow-list format: color, x, y, blur;
background-color with color values
border of element with either border affecting all borders
or border-edge-color and border-top-width where edge can be changed to top bottom left right


Transition-duration
This property defines the length of time that a transition takes - how long from the old value to the new value? If you do not add this property, the value will be "0s" by default which means that the transition is immediate and not smooth. By adding a value like 1s, you can see the animation go smoother like in Fig. 1. You can change the duration as you like, if you want it to go slower, it could take 3s instead.

Fig. 1 - Click Here for Live Preview

CSS
img{
padding-left: 0;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}

img:hover{
padding-left: 100px;

/* All Browsers */
transition-property: padding-left;
transition-duration: 1s;
 
/* Webkit Browsers */
-webkit-transition-property: padding-left;
-webkit-transition-duration: 1s;
 
/* Firefox */
-moz-transition-property: padding-left;
-moz-transition-duration: 1s;

/* Opera */
-o-transition-property: padding-left;
-o-transition-duration: 1s;
}

As you can see, there should be a transition-duration specified for when the animation takes on hover and when it's off hover. So that it goes smoothly when you point your mouse over it and after you take the mouse off. The time doesn't have to be the same for both. You can make it go slower when it's returning back to its original value.

Go ahead and play around with the duration property here to see it happen in action

Transition-timing-function
This property describes how the values used during a transition will be calculated. It allows for a transition to change speed over its duration. For example, if I want an animation to look like it's running from one location to the other, it can start really fast at first like a sprinter in real life does, then go at a slower constant speed, then pick up speed again towards the end. These effects are commonly called easing functions and a mathematical function that provides a smooth curve is used. There's two ways to define the timing functions: a stepping function or a cubic Bézier curve.

A stepping function is easy to understand. It just divides the number of steps into equally sized intervals. The function also specifies whether the change in output percentage happens at the start or end of the interval (in other words, if 0% on the input percentage is the point of initial change). ex: steps(2, start)


Fig. 3 - Stepping Function

A cubic Bézier curve is defined by four control points, P0 through P3 (see Fig. 4). P0 and P3 are always set to (0,0) and (1,1). The transition-timing-function property is used to specify the values for points P1 and P2.

These can be set to preset values using the keywords like ease-in or can be set to specific values using the cubic-bezier function ex: cubic-bezier(0, 0, 1, 1)


Fig. 4 - Bézier curve

Keywords with its equivalent in the cubic-bezier
ease = cubic-bezier(0.25, 0.1, 0.25, 1)
linear = cubic-bezier(0, 0, 1, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)
step-start = steps(1, start)
step-end = steps(1, end)

Fancy Menu Using ease-in


Fig. 5 - Click here to see Template!

In the template I made here  I have the code and the html where you can see that the menu class has the transition property in which it eases in when hovered on and hover off.

Transition-delay
This property defines when the transition will start. It allows a transition to start executing after some time when an action is applied. For example, an animation can start 5 seconds after I hover over the element. It is 0s by default which means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

transition-delay: 3s;

Fig. 6 - Hover until the image changes

As you can see in the example above, the image doesn't change until after 3 seconds have passed, so the animation doesn't occur until after a certain time that the coder has defined. You can find the template here !

Transition
This basically groups all the four previously mentioned properties together in one property in the following order:

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;

Here's how we could use all the properties for one animation:

Fig. 7 - Hover to see effect

I've changed two CSS properties for the example above: width of the image and the background-color so this is how the syntax would look:

transition: width 1s ease-in, background-color 1s ease-in;

What if I have too many transition properties with the same timing functions?
Well, quite easily, instead of name ALL the properties and separating them out by commas, you can simply just add all to your code. (Thanks to jonarific for pointing it out!) So the new syntax would now look like this:

transition: all 1s ease-in;

That's about all there really is to it! If you wanna test your knowledge and challenge your skills, check out the small contest below!

Mini-Contest
For 100 , create a snazzy drop-down menu using the template provided with transitions and bonus points for whoever makes it look appealing using gradients or any other properties mentioned in previous articles!

Save your work on
and link your snippet in the comments below!
Ends on June 7th

Good luck!



TL;DR - Documentation
transition-property: property;

transition-duration: time;

steps(integer, start)
steps(integer, end)

cubic-bezier(number, number, number, number)
cubic-bezier(x1, y1, x2, y2) curve where both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.

transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: linear; = transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-timing-function: ease-in; = transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: ease-out; = transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
transition-timing-function: ease-in-out; = transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: step-start; = transition-timing-function: steps(1, start);
transition-timing-function: step-end; = transition-timing-function: steps(1, end);

transition-delay: time;

transition: transition-property, transition-duration, transition-timing-function, and transition-delay;
All four properties grouped together


Useful Links
CSS3 Animated Journal Skin by DEVlANT



For Non-Alpha Members, if you'd like to try having CSS3 effects look at this great tutorial by Fli-c


If you'd like to learn more about CSS basics, I suggest you have a look at these groups:

Create your own Journal Skin by miontre
Prefix CSS Generator

Test out CSS3 snippets with an instant Live Preview in this CSS Sandbox:





Related content

[ TEXT ]


imnotsana - PE: Cellphone Art + Contests

[ TEXT ]


imnotsana - SquibbleBox Feature I

[ TEXT ]


imnotsana - PE: CSS3 101 - Conclusion + Trivia and Contest

[ TEXT ]


imnotsana - PE: CSS3 101 - Pseudo Elements/Classes
Comments: 23

Moiscen [2014-06-08 16:15:43 +0000 UTC]

That's really cool, oh my gosh *0* I love how you explain it so well! I wish I could be able to use that kind of CSS;

👍: 0 ⏩: 0

sulaman [2013-10-01 18:37:02 +0000 UTC]

Hi, 


Have made a similar website, based on CSS3. 


www.uiplayground.in/css3-icons


Hope this may help you.


👍: 0 ⏩: 0

gillianivyart [2013-06-04 21:37:12 +0000 UTC]

So wait... I take it you have Alpha privs again or you have magic CSS3 going on? ;D

👍: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-06-05 02:12:27 +0000 UTC]

I used =Fli-c 's hax but hope it was enough to understand? (couldn't note you cause wrote all these up last minute x.x) lemme know if you have any questions about CSS3 though

👍: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-06-05 13:06:17 +0000 UTC]

Oh yes, I've read that one before, it is pretty brilliant. But waaay complicated, good thing there is a generator, else it would hurt people's brains too much to try to figure it out. It kinda resembles math.... Which makes me run away!

I will send you inquires when I think of them ;D

👍: 0 ⏩: 1

imnotsana In reply to gillianivyart [2013-06-06 09:10:57 +0000 UTC]

I actually love math probably the reason I studied Computer Science instead of med school

Yeah, pretty brilliant indeed! Had to use it without the generator though to get the transition effects in this journal, but it definitely makes it easier for everyone else

👍: 0 ⏩: 1

gillianivyart In reply to imnotsana [2013-06-06 15:35:22 +0000 UTC]

I like math, though I am not particularly good at it. Though ?i do like science and science is very math oriented. I failed my math classes in high school. Maybe because I was so confused from taking 4 years of various Algebra classes and nothing else.

👍: 0 ⏩: 0

iAmoret [2013-06-03 16:44:30 +0000 UTC]

This is so cool! Too bad us normal peoples can't use it.

👍: 0 ⏩: 1

imnotsana In reply to iAmoret [2013-06-03 20:12:45 +0000 UTC]

Aww, I know they really should release it already

👍: 0 ⏩: 1

iAmoret In reply to imnotsana [2013-06-03 20:52:24 +0000 UTC]

C'mon, dA, PICK UP THE PACE!

👍: 0 ⏩: 0

MissLunaRose [2013-06-03 03:17:59 +0000 UTC]

This is awesome! Thank you so much for sharing! I hope that someday regular deviants will be able to use this too.

👍: 0 ⏩: 1

imnotsana In reply to MissLunaRose [2013-06-03 03:44:41 +0000 UTC]

Thank you!

Yeah, I hope so too!

👍: 0 ⏩: 0

jonarific [2013-06-01 23:27:29 +0000 UTC]

Great article once again! Only addition I can think of is the possibility to define the transition property as all. Can be really helpful if multiple properties are animated and you don't want to list each of them individually.

👍: 0 ⏩: 1

imnotsana In reply to jonarific [2013-06-02 03:03:50 +0000 UTC]

ack how could I forget that thanks for reminding me!

👍: 0 ⏩: 0

miontre [2013-06-01 22:31:01 +0000 UTC]

Great article!

👍: 0 ⏩: 1

imnotsana In reply to miontre [2013-06-02 03:04:54 +0000 UTC]

Thanks! Looking forward to seeing your CSS3 fanciness!

👍: 0 ⏩: 0

spring-sky [2013-06-01 21:57:29 +0000 UTC]

Can this work for dA's profile page costume boxes ??

👍: 0 ⏩: 1

miontre In reply to spring-sky [2013-06-01 22:31:13 +0000 UTC]

No, because you can't use CSS in custom boxes.

👍: 0 ⏩: 1

spring-sky In reply to miontre [2013-06-01 22:44:46 +0000 UTC]

Oh ,I see .

Thanks for answering .

👍: 0 ⏩: 0

Drake1 [2013-06-01 17:45:58 +0000 UTC]

CSS is srs bsns guise!

Nice article, I learn some new things, thank you! Now I'll sit here and wait for transitions to be available for everyone ;_;

👍: 0 ⏩: 1

imnotsana In reply to Drake1 [2013-06-01 17:56:18 +0000 UTC]

You don't have to Check out the link I added at the bottom [link] by =Fli-c

👍: 0 ⏩: 1

Drake1 In reply to imnotsana [2013-06-01 18:53:59 +0000 UTC]

Yes I saw that, but it was too complicated for my brain

👍: 0 ⏩: 1

imnotsana In reply to Drake1 [2013-06-01 20:23:06 +0000 UTC]

aww well it's been in Alpha for over a year now.. so should be released soon enough keep all your transition magics ready on the CSS sandbox so that once it's released, you can submit your awesome skins right away

👍: 0 ⏩: 0