better styling with animation

plugin.info.txt

 base   passwordgrey
 author Michael Schreiber
 email  m.schreiber@creatronics.de
-date   2020-01-09
+date   2021-02-16
 name   passwordgrey plugin
 desc   display passwords in grey
 url    https://www.dokuwiki.org/plugin:passwordgrey

script.js

@@ -3,7 +3,7 @@
 
 color_icobase = "../../plugins/passwordgrey/images/";
 
-if(window.toolbar != undefined) {
+if(window.toolbar !== undefined) {
   toolbar[toolbar.length] = {
     "type":"format",
       "title":"Password",
@@ -12,7 +12,6 @@ if(window.toolbar != undefined) {
       "close":"</pwd>"
   };
 }
-
 function copyClip(id){
   var copyText = document.getElementById(id);
   text = copyText.textContent;
@@ -25,11 +24,11 @@ function copyClip(id){
   document.body.removeChild(el);
 
   el = document.createElement("div");
-  el.setAttribute("style","font-size: 2em;text-align:center;vertical-alignment:middle;position:absolute;top:40px;left: 50%;transform: translate(-50%, 0);background-color:lightgrey;");
+  el.setAttribute("class","passwordgreyCTC");
   el.innerHTML = "Copied to clipboard!";
   setTimeout(function(){
     el.parentNode.removeChild(el);
-  },1000);
+  },1500);
   document.body.appendChild(el);
 }
 

style.css

 .passwordgrey{
     color:lightgray;
 }
+
+.passwordgreyCTC{
+    font-size: 2em;
+    text-align: center;
+    vertical-align: middle;
+    position: fixed;
+    top: 40px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background-color: lightgrey;
+    border-radius: 100000px;
+    padding: 10px;
+    animation: showCTC 1.5s linear forwards;
+    opacity: 1;
+}
+
+@keyframes showCTC {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
\ No newline at end of file