<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>animation effect javascript</title>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
div{
width: 90%;
padding: 30px 10px;
margin: 10px auto;
color: cornflowerblue;
border: 1px solid #ccc;
border-radius: 1%;
font-weight: bold;
text-align: center;
box-shadow: 0px 0px 20px #088;
}
div::before{
content: "";
padding: 1px;
background: red;
position: relative;
animation: animat .5s infinite;
}
@keyframes animat{
0%{opacity: 0}
75%{opacity: 1}
100%{opacity: 0}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div data-text="مرحبا بك بعدد ما في القلوب من محبه... بالتوفيق معنا في هذا الكيان الكبير."></div>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2ndow/animation-effect-javascript-JprOpm */
div{
width: 90%;
padding: 30px 10px;
margin: 10px auto;
color: cornflowerblue;
border: 1px solid #ccc;
border-radius: 1%;
font-weight: bold;
text-align: center;
box-shadow: 0px 0px 20px #088;
}
div::before{
content: "";
padding: 1px;
background: red;
position: relative;
animation: animat .5s infinite;
}
@keyframes animat{
0%{opacity: 0}
75%{opacity: 1}
100%{opacity: 0}
}
/*Downloaded from https://www.codeseek.co/2ndow/animation-effect-javascript-JprOpm */
var myDiv = document.querySelector("div"),
myText = myDiv.getAttribute("data-text"),
i = 0,
clit = setInterval(function () {
"use strict";
myDiv.textContent += myText[i];
i += 1;
if (myDiv.textContent >= myText) {
clearInterval(clit);
}
}, 200);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
