- In the extension bar, click the AdBlock Plus icon
- Click the large blue toggle for this website
- Click refresh
- In the extension bar, click the AdBlock icon
- Under "Pause on this site" click "Always"
- In the extension bar, click on the Adguard icon
- Click on the large green toggle for this website
- In the extension bar, click on the Ad Remover icon
- Click "Disable on This Website"
- In the extension bar, click on the orange lion icon
- Click the toggle on the top right, shifting from "Up" to "Down"
- In the extension bar, click on the Ghostery icon
- Click the "Anti-Tracking" shield so it says "Off"
- Click the "Ad-Blocking" stop sign so it says "Off"
- Refresh the page
- In the extension bar, click on the uBlock Origin icon
- Click on the big, blue power button
- Refresh the page
- In the extension bar, click on the uBlock icon
- Click on the big, blue power button
- Refresh the page
- In the extension bar, click on the UltraBlock icon
- Check the "Disable UltraBlock" checkbox
- Please disable your Ad Blocker
- Disable any DNS blocking tools such as AdGuardDNS or NextDNS
- Disable any privacy or tracking protection extensions such as Firefox Enhanced Tracking Protection or DuckDuckGo Privacy.
If the prompt is still appearing, please disable any tools or services you are using that block internet ads (e.g. DNS Servers, tracking protection or privacy extensions).
Question
normansu
This is an sample of a pure CSS3 animation.
You don't need any js or jQuery coding.
i wanted to show you an existing sample but NEOWIN considered it as an ad.....
first of all, let's have a quick look of why CSS3 animation doesn't need js anymore.
In traditional html-web animation coding, animation was defined as an Element Movement, which means that the position of an element(padding/margin or absolute) should be changed to implement an animation.And of course, html/css doesn't support any dynamic coding, so you have to use js.
but within the CSS3 -webkit-animation, the animation was redefined as the trasform/traslate from one key frame to another, so js can be ignored partially.
OK, ready for the show.
when you click learn more button on annals.me, the blue part is moving down.
Before animation, we firstly build a simple layout as follow(original code on annals.me is more complicated.)
HTML Code:
it looks like this
This animation is simple, we defined to key frames that are close and opening , and above is opening.
then we write these into <style></style>
HTML Code:
@-webkit-keyframes show {
from {-webkit-transform: translateY(-300px);}
to {-webkit-transform: translateY(0);}
}
</style>
[/CODE]
we name this animation as show.Remember this name.
FROM is the first key frame, which refers to close(beginning of the animation), translateY(-300px).
Note the opening part is 300px height, so transitionY(-300px) will move this element out of screen.
TO is the second key frame, which refers to opening(ending of the animation), and the original CSS style(.opening) above is the opening style, so translateY(0).
After we finish defining the animation's key frames?we just simply put this name of the animation into the element's style by -webkit-animation.
HTML Code:
diplay:block;
width:80%;
height:300px;
background:#006699;
-webkit-animation: show 1s 1 linear;
}
[/CODE]
show:the name of this animation
1s:duration of this animation
1:times of reaction
linear:ways of moving
now you can check the web. It is finished and without any js.
Actually, you may want to trigger this animation by clicking the button.
So we add some few js coding to make that happend.
define a default close style. You just add translateY(-300px)
HTML Code:
diplay:block;
width:80%;
height:300px;
background:#006699;
-webkit-transform: translateY(-300px);
}[/CODE]
then, replace the div style from .opening to .close
HTML Code:
check the web, hidden part should be really hidden.
last, write a simple function and link this function to the btn
HTML Code:
function show(){
document.getElementById("moving").className = "opening";
}
</script>[/CODE]
and add a button in the body
HTML Code:
it is done.
OK, if you want to close the part, it is very simple if you understand this tutorial.
Try it yourself
full code
Code:
<head>
<style>
body
{padding:0;}
.whole {
display:block;
width:100%;
height:auto;
padding:0 10%;
}
.close {
diplay:block;
width:80%;
height:300px;
background:#006699;
-webkit-transform: translateY(-300px);
}
.opening {
diplay:block;
width:80%;
height:300px;
background:#006699;
-webkit-animation: show 1s 1 linear;
}
.opening p{
padding:10%;
font-family:Arial;
color:white;
font-size:60px;
}
.btn{
display:block;
width:100px;
margin:auto;}
@-webkit-keyframes show {
from {-webkit-transform: translateY(-300px);}
to {-webkit-transform: translateY(0);}
}
</style>
<script>
function show(){
document.getElementById("moving").className = "opening";
}
</script>
</head>
<body>
<div class="whole">
<div id="moving" class="close">
<p>This is the hidden part</p>
</div>
</div>
<input type="button" class="btn" value="show" onclick="show()"/>
</body>
</html>[/CODE]
Link to comment
https://www.neowin.net/forum/topic/1071837-html5-dev-note-1-css3-animation-withou-js/Share on other sites
4 answers to this question
Recommended Posts